tapping prefixIcon of TextField causes TextField to be focussed

Question

I have a TextField which has an attribute prefixIcon that accepts a widget. I passed a GestureDetector so that I can do something onTap event of it. But the problem I am facing is as soon as I tap it, though it calls onTap event it but along with that it also focussed the TextField that further launches the keyboard.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:MyWidget,
    );
  }
}

class MyWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return MyWidgetState();
  }
}

class MyWidgetState extends State<MyWidget>
{
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      padding: EdgeInsets.all(20),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => print("hmm"),
          ),
        ),
      ),
    );
  }
}

So I am trying to find a way by which tapping on prefixIcon widget (here GestureDetector doesn't focus TextField). How can I achieve that functionality?

Answer 1

I was facing a similar problem, here I explained the problem and a possible solution: Flutter DropdownButton inside TextFormField as prefix

In your case, instead of DropdownButton is a Container, so you could do this:

Wrap(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [BoxShadow()],
      ),
      child: Row(
        children: <Widget>[
          GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => print("hmm"),
          ),
          Flexible(
            child: TextField(),
          ),
        ],
      ),
    ),
  ],
)

---

Edit: Unfortunately the prefix of the TextField is intended to be used when the TextField is focused. I could come up with a workaround detecting the focus of the TextField and unfocusing it if the prefix was tapped, here is an example:

final _controller = TextEditingController(text: "Test");
final _focusNode = FocusNode();
var _prefixTapped = false;

@override
void initState() {
  super.initState();
  _focusNode.addListener(() {
    if (_focusNode.hasFocus & _prefixTapped) _focusNode.unfocus();
    _prefixTapped = false;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("TextFieldWithGesturePrefix")),
    body: TextField(
      controller: _controller,
      focusNode: _focusNode,
      decoration: InputDecoration(
        prefixIcon: GestureDetector(
          child: Container(
            color: Colors.greenAccent,
            child: Text("Any widget"),
          ),
          onTap: () {
            _prefixTapped = true;
            _focusNode.unfocus();
            print("prefix tapped");
          },
        ),
      ),
    ),
  );
}

Answer 2

You could wrap the TextField in a Row then add an icon before that that is tappable. Then it won't matter what the default behavior is.

Container(
  height: 200,
  width: 200,
  padding: EdgeInsets.all(20),
  child: Row(
    children: <Widget>[
      GestureDetector(
        child: Container(color: Colors.greenAccent, width: 25, height: 25,),
        onTap: () => print("hmm"),
      ),
      Expanded(child: TextField()),
    ],
  ),
)

I think I have a better solution for you since it doesn't require any manipulation of the FocusNode. Simply pass the two into a Stack, make use of the CompositedTransformTarget/Followers and overlay the decorator with the item you want. I've tested it and it works. It also makes it so the icon you want to place over the prefix input follows along the size of the textfield if that's what you want. Keeping things in sync.

class TestWidget extends StatelessWidget {

  final LayerLink link = LayerLink();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[

        TextField(
          maxLines: null,
          decoration: InputDecoration(
            prefixIcon: CompositedTransformTarget(
              child: Container(color: Colors.transparent, width: 25, height: 25,),
              link: link,
              ),
          )
        ),



        CompositedTransformFollower(
          link: link,
          child: GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => Vibrate.feedback(FeedbackType.heavy),
          ),
        )
      ],
    );
  }
}