Flutters gesture detector onTap only fires on text child

Question

I'm making a widget that has a gesture detector as its root, its child is a column which then has multiple different children views some of which are text fields, but the gesture detector only fires if I press the text fields despite the views taking up the full screen in the flutter inspector here is my build method

      @override
      Widget build(BuildContext context) {
        return GestureDetector(
          onTap: (){
            print("tap");
            function(context);
          },
          child: Column(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: buildTopDivider(),
              ),
              Container(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(right: 8.0),
                          child: Column(
                            children: buildTextFields(),
                          ),
                        ),
                      ),
                      Column(
                        children: buildIconContainer(),
                      ),
                    ],
                  ),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: buildBottomDivider(),
              )
            ],
          ),
        );
      }

and attached is a screen shot showing the gesture detector taking up the entire view, which is a little bit redacted but shows the issue, so i want to be able to press anywhere on this item and get the onPress method to fire but currently as stated it only fires if i press either of the text views which seems strange, any ideas?

Solution 1

With this code GestureDetector.onTap works everywhere in the red area except in TextField:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'foo text',
            ),
            GestureDetector(
//              behavior: HitTestBehavior.translucent,
              onTap: () {
                print("tap");
//                  function(context);
              },
              child: Column(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
//                      children: buildTopDivider(),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.red,
                              padding: const EdgeInsets.only(right: 8.0),
                              child: Column(
//                                  children: buildTextFields(),
                                children: [
                                  Text('foo bar baz'),
                                  TextField(onTap: () => print('TextField tapped'),),
                                  Text('foo bar baz'),
                                ],
                              ),
                            ),
                          ),
                          Column(
//                              children: buildIconContainer(),
                              ),
                        ],
                      ),
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
//                      children: buildBottomDivider(),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Your code calls functions that are not included in your question so it's hard to tell what is actually happening.

Solution 2

Add behavior Property to GestureDetector. It will make the whole Container Clickable.

GestureDetector(
        behavior: HitTestBehavior.opaque,
        child:...
)

Solution 3

Just add color: Colors.transparent, to Container widget

Solution 4

Using InkWell instead of GestureDetector solves the problem. onTap fires everywhere in the list item. It also gives a feedback for tap action.

View more solutions