Prevent focusing of TextFormField when I tap suffixIcon inside the TextFormField

Question

When I press the button and the TextFormField will be focused and the keyboard will appear. How to fix this problem?
code below:

TextFormField(
              controller: code,
              focusNode: codeFocus,
              decoration: InputDecoration(
                labelText: 'verify code',
                prefixIcon: Icon(Icons.sms),
                suffixIcon: FlatButton(
                  onPressed:(){}
                  child: Text('send sms'),
                  textTheme: ButtonTextTheme.primary,
                ),
              ),
              keyboardType: TextInputType.number,
            ),
            focusNode: codeFocus,
          )

I had the same problem for the common password's eye for visibility. I want suffixIcon taps not to focus the text field but I also don't want focus to be lost if user is typing the password and toggles visibility. Hope this helps https://stackoverflow.com/questions/49125064/how-to-show-hide-password-in-textformfield/68910940#68910940 — Bugzilla, Aug 24 '21 at 22:00

score 8 · Accepted Answer · answered Oct 03 '19 at 18:06

You can use stack like this.

Stack(
  alignment: Alignment.centerRight,
  children: <Widget>[
    TextFormField(
      decoration: InputDecoration(
        labelText: 'verify code',
        prefixIcon: Icon(Icons.sms),
      ),
      keyboardType: TextInputType.number,
    ),
    FlatButton(
      onPressed: () {},
      textTheme: ButtonTextTheme.primary,
      child: Text('send sms'),
    ),
  ],
)

The same question was asked few days ago by the way...

score 2 · Answer 2 · answered Nov 17 '20 at 18:10

Use this function when you tap on your suffixIcon.

() {
  // This will help to wait for TextField to get focus before
  // we unfocus but it will happen fast so that you won't notice.
  Future.delayed(Duration.zero, () {
    _yourInputFocusNode.unfocus();
    // Your implementation to run when tap suffixIcon in TextField
  });
},

Example

TextFormField(
  focusNode: _phoneNumberFocusNode,
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(Icons.contacts),
      onPressed: () {
        Future.delayed(Duration.zero, () {
          _phoneNumberTwoFocusNode.unfocus();
          Navigator.pushNamed(context, 'Contacts');
        });
      },
    ),
  ),
),

Prevent focusing of TextFormField when I tap suffixIcon inside the TextFormField

2 Answers2

Use this function when you tap on your suffixIcon.

Example