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,
          )

Answer 1

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...

Answer 2

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');
        });
      },
    ),
  ),
),