Flutter : how to make an entire row clickable - flutter

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: <Widget>[
Container(
child: Row(
children: <Widget>[
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.

Answer 1

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

Answer 2

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<MyHomePage> {
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: <Widget>[
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: <Widget>[
Container(
child: Row(
children: <Widget>[
icon,
SizedBox(width: 20.0),
Text(
title,
style: TextStyle(
fontSize: 16.0,
),
),
],
)),
Icon(
Icons.arrow_forward_ios,
size: 20.0,
),
],
),
);
}

Answer 3

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.