Flutter: A FocusNode was used after being disposed

Question

I have a simple Flutter form inside a stateful widget with a bunch of text fields to capture credit card details. And when I show this form, tap the first field, type something in it, then tap the second field, the focus is not transferred to the second field, the cursor stays in the first one, even though both fields appear focused (border is visible on both) and when I type, it goes in the first field. The only way to type something into the second field is to long tap it as if I wanted to paste something in it. And in the console, I see this:

[VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: A FocusNode was used after being disposed.
Once you have called dispose() on a FocusNode, it can no longer be used.
#0      ChangeNotifier._debugAssertNotDisposed.<anonymous closure> (package:flutter/src/foundation/change_notifier.dart:117:9)
#1      ChangeNotifier._debugAssertNotDisposed (package:flutter/src/foundation/change_notifier.dart:123:6)
#2      ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:234:12)
#3      FocusNode._notify (package:flutter/src/widgets/focus_manager.dart:1052:5)
#4      FocusManager._applyFocusChange (package:flutter/src/widgets/focus_manager.dart:1800:12)
#5      _rootRun (dart:async/zone.dart:1346:47)
#6      _CustomZone.run (dart:async/zone.dart:1258:19)
#7      _CustomZone.runGuarded (dart:async/zone.dart:1162:7)

The thing is that none of the fields have a focus node-set, so it seems something wrong is happening inside the Flutter form state. Has anybody seen this?

Note that for me, it occurs on the web and mobile alike, but not consistently.

Here is the code of the problematic form.

And here is a screenshot illustrating 2 fields having focus at the same time, and the cursor is stuck in the first one. And when I type something on the keyboard, it's directed at the first field. This is running on a physical iPhone device.

And here is the function that is called as the onPressed of an ElevatedButton to show this form:

Future<void> _addPaymentMethod(BuildContext context) async {
    await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          body: CardForm(),
        ),
      ),
    );
  }

Answer 1

I think the problem is using Focus widget.

You should be using FocusNode and pass this FocusNode as one of the named arguments of TextField (your CardCvcFormField).

You can attach a listener to the FocusNode and get the focus visibility.

FocusNode _cvcFocusNode;

@override
void initState() {
    super.initState();
    _cvcFocusNode = FocusNode();
    _cvcFocusNode.addListener(_onCvcFormFieldFocusChanged);
}

void _onCvcFormFieldFocusChanged() {
   setState(() => cvcHasFocus = _cvcFocusNode?.hasFocus ?? false);
}

@override
void dispose() {
   _cvcFocusNode?.removeListener(_onCvcFormFieldFocusChanged);
   _cvcFocusNode?.dispose();
   _cvcFocusNode = null;
   super.dispose();
}