Flutter : how to make an entire row clickable

Question

How do I make the entire row clickable in flutter?. I have the following code wrap in a "GestureDetector". The individual items in the row are clickable but white space around the widget are not.

if ((auth.isLoggedIn)) ...[
   GestureDetector(
     onTap: () {
        auth.signOut();
     },
     child: buildItem(
        Image.asset("assets/images/logoff.png",),
        "logout"
     ),
   ),
],

This is the "buildItem" method

Widget buildItem(Widget icon, String title) {
    return Padding(
      padding: const EdgeInsets.only(left: 20, right: 15),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
              child: Row(
            children: [
              icon,
              SizedBox(width: 20.0),
              Text(
                title,
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ],
          )),
          Icon(
            Icons.arrow_forward_ios,
            size: 20.0,
          ),
        ],
      ),
    );
  }

This is the output. Each item in the row (icon, text and the >) respond to the tap gesture. However, the white space(e.g between the text and the ">") does not respond to tap

How can I make entire row respond to the tap.

user_1032201 · Answer

  child: GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
      ///
      },

user_2179571 · Answer

replace GestureDetector with InkWell works great

full code

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 {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InkWell(
              onTap: () {
                print("click");
              },
              child: buildItem(
                  Image.network("https://picsum.photos/250?image=9",),
                  "logout"
              ),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Widget buildItem(Widget icon, String title) {
  return Padding(
      padding: const EdgeInsets.only(left: 20, right: 15),
      child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
                child: Row(
                  children: [
                    icon,
                    SizedBox(width: 20.0),
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 16.0,
                      ),
                    ),
                  ],
                )),
            Icon(
              Icons.arrow_forward_ios,
              size: 20.0,
            ),
          ],
      ),
  );
}

user_7730616 · Answer

row: mainAxisAlignment: MainAxisAlignment.spaceBetween

For space between, the first and the last object will stick to the edge of the container, while leaving the empty unused space in between (if there is other objects, it will distributed it evenly), like shown in the screenshot below:

Hence to solve this, you just have to make sure that there is no empty space between.

One way is to use mainAxisSize: MainAxisSize.max and MainAxisAlignment.start in the Row where you put your icon and text.

Flutter : how to make an entire row clickable

3 Answers