Why is focus activated on a text field after clicking a button on a page?

Question

Tell me please. I have 4 text fields on which the focus switches in order. When all text fields are filled, the focus disappears. But after clicking on the button, the focus on the last text field is activated for me and the keyboard opens until it goes to a new page. How to stop opening the keyboard after pressing a button on the page?

class CodeVerificationFieldWidget extends StatefulWidget {
  const CodeVerificationFieldWidget({
    Key? key,
    required this.activationCodeCubit,
  }) : super(key: key);

  final ActivationCodeCubit activationCodeCubit;

  @override
  State<CodeVerificationFieldWidget> createState() =>
      _CodeVerificationFieldWidgetState();
}

class _CodeVerificationFieldWidgetState
    extends State<CodeVerificationFieldWidget> {
  late FocusNode myFocusNode1;
  late FocusNode myFocusNode2;
  late FocusNode myFocusNode3;
  late FocusNode myFocusNode4;

  late bool isErrorView;

  final codeTextEditingController1 = TextEditingController();
  final codeTextEditingController2 = TextEditingController();
  final codeTextEditingController3 = TextEditingController();
  final codeTextEditingController4 = TextEditingController();

  @override
  void initState() {
    super.initState();
    myFocusNode1 = FocusNode();
    myFocusNode2 = FocusNode();
    myFocusNode3 = FocusNode();
    myFocusNode4 = FocusNode();

    isErrorView = false;
  }

  @override
  void dispose() {
    super.dispose();
    myFocusNode1.dispose();
    myFocusNode2.dispose();
    myFocusNode3.dispose();
    myFocusNode4.dispose();

    codeTextEditingController1.dispose();
    codeTextEditingController2.dispose();
    codeTextEditingController3.dispose();
    codeTextEditingController4.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<ActivationCodeCubit, ActivationCodeState>(
      listener: (context, state) {
        if (state is ErrorActivationCode) {
          setState(() {
            isErrorView = true;
          });
        } else {
          setState(() {
            isErrorView = false;
          });
        }
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 34),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _cellNumber(myFocusNode1, codeTextEditingController1),
                _cellNumber(myFocusNode2, codeTextEditingController2),
                _cellNumber(myFocusNode3, codeTextEditingController3),
                _cellNumber(myFocusNode4, codeTextEditingController4),
              ],
            ),
            const SizedBox(
              height: 8,
            ),
            _errorMessage(),
          ],
        ),
      ),
    );
  }

  Widget _cellNumber(FocusNode focusNode, TextEditingController controller) {
    return Container(
      alignment: Alignment.center,
      height: 70,
      width: 70,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: constants.Colors.greyDark.withOpacity(0.5),
        border: Border.all(
          color: isErrorView ? Colors.red : Colors.transparent,
        ),
        boxShadow: [
          BoxShadow(
            color:
                isErrorView ? Colors.red.withOpacity(0.3) : Colors.transparent,
            spreadRadius: 2,
            blurRadius: 3,
            // offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: TextField(
        controller: controller,
        focusNode: focusNode,
        onChanged: (text) {
          _changeFocus(focusNode, text);
        },
        textAlign: TextAlign.center,
        cursorColor: constants.Colors.white,
        style: constants.Styles.xxLargeHeavyTextStyleWhite,
        keyboardType: TextInputType.phone,
        decoration: const InputDecoration(
          border: InputBorder.none,
        ),
        inputFormatters: [
          LengthLimitingTextInputFormatter(1),
        ],
      ),
    );
  }

  Widget _errorMessage() {
    return isErrorView
        ? const Text(
            'Wrong code. Please try again',
            style: constants.Styles.tinyHeavyTextStyleRed,
          )
        : const Text('');
  }

  void _changeFocus(FocusNode focusNode, String text) {
    String code = '';
    code = codeTextEditingController1.text +
        codeTextEditingController2.text +
        codeTextEditingController3.text +
        codeTextEditingController4.text;

    if (text.isEmpty) {
      focusNode.previousFocus();
    } else {
      focusNode.nextFocus();
    }

    widget.activationCodeCubit.setActivationCode(code);
  }
}

button

DefaultButtonGlow(
                  text: 'Done',
                  color: constants.Colors.purpleMain,
                  onPressed: (() {
                    activationCodeCubit.checkActivationCode();
                  }),

score 4 · Answer 1 · answered Jun 10 '22 at 12:56

4

I've made this feature without focus node, you just need to add this parametres in you field, at first:

TextField(
    autofocus: true,
    textInputAction: TextInputAction.next,
),

It's for first field, if autofocus is true then when page is opened it will focus on it, and after submit it will focus next field.

In next fields you don't need autofocus.

TextField(
    textInputAction: TextInputAction.next,
),

In the last field just change textInputAction to TextInputAction.done

TextField(
    textInputAction: TextInputAction.done,
),

answered Jun 10 '22 at 12:56

MerdanDev

381
3
13

That is, I can not use the focus node? – Max Jun 10 '22 at 13:12
And how then to make the focus automatically switch between fields and not by pressing a button? – Max Jun 10 '22 at 13:54
https://stackoverflow.com/a/60455958/14110537 check this, my answer is same as it. – MerdanDev Jun 10 '22 at 14:13
Yes I understand. Thank you for your help, but this is not exactly what I need. I need to automatically switch focus. But I already solved the problem, by clicking on the button I registered the unfocus() method. But once again, thanks for telling me, you opened up a new option for me how to switch focus) – Max Jun 10 '22 at 14:18
Perhaps you could tell me with the question where is the problem in focus? https://stackoverflow.com/questions/72560907/focusnode-not-working-when-i-open-a-page-in-flutter – Max Jun 10 '22 at 14:19

Why is focus activated on a text field after clicking a button on a page?

1 Answers1