Keyboard appears when click on help icon inside textfield - flutter

Question

How do I stop the keyboard from appearing if the user clicks on this help icon... Here is a screenshot
Any type of help will greatly appreciated
Here is my code
TextFormField(
obscureText: false,
controller: urlController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter instagram url';
}
return null;
},
decoration: InputDecoration(
focusedBorder:OutlineInputBorder(
borderSide: const BorderSide(color: Colors.green, width: 1.0),
borderRadius: BorderRadius.circular(8.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
filled: true,
fillColor: Colors.white,
border: InputBorder.none,
labelText: 'Paste Your URL',
suffixIcon: IconButton(
onPressed: (){},
icon: Icon(Icons.help),
iconSize: 30.0,
color: Colors.grey[400],
),
),
)

Answer 1

Use suffix property instead of suffixIcon and if it still doesn't work on its own, wrap it with a IgnorePointer widget.
However, I assume that that ? button will have a onTap function, if so, it should then it shouldn't be a problem.
suffix: IgnorePointer(
child:IgnorePointer(
child: IconButton(
onPressed: () {},
icon: Icon(Icons.help),
iconSize: 30.0,
color: Colors.grey[400],
),
);
),

Answer 2

suffixIcon is now part of the TextField so we cannot do it using focus node as per changes made by flutter team.
However you can create your layout with Stack widget.
Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Stack(alignment: Alignment.centerRight, children: [
TextFormField(
focusNode: focusNode,
obscureText: false,
controller: urlController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter instagram url';
}
return null;
},
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 1.0),
borderRadius: BorderRadius.circular(8.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
borderSide: BorderSide(width: 1, color: Colors.green),
),
filled: true,
fillColor: Colors.white,
border: InputBorder.none,
labelText: 'Paste Your URL',
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.help,
size: 30.0,
color: Colors.grey,
),
),
])),
Or you can use use CupertinoTextField

Answer 3

try this:
suffixIcon: IconButton(
onPressed: (){
FocusScope.of(context).unfocus();
//or FocusScope.of(context).requestFocus(new FocusNode());
},
icon: Icon(Icons.help),
iconSize: 30.0,
color: Colors.grey[400],
),
[EDITED]
or simple use Stack to avoid touching Textfield when touching icon:
Stack(
children: [
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(right: 20.0),
),
),
Positioned(
right: 0,
child: Container(
width: 20,
height: 20,
child: IconButton(onPressed:(){}, icon: Icon(Icons.add),),
),
),
],
),

Answer 4

stack(
children: [
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(right: 20.0),
),
),
Positioned(
right: 0,
child: Container(
width: 20,
height: 20,
child: IconButton(onPressed:(){}, icon: Icon(Icons.add),),
),
),
],
),