how to make whole item clickable instead of just visible items? - dart

Question

I have a sidebar containing different items to open different screens. But i am only able to make image and textview clickable not whole item.
_myDrawer() => Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: _myDrawerHeader(),
decoration: BoxDecoration(
color: const Color(0xFF0ea0aa),
),
),
Container(
width: double.infinity,
child: GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return TermNCondition();
}));
},
child: Row(
children: <Widget>[
_drawerItem('images/ic_tc.png', 'Terms &
Conditions'),
_addDivider(Colors.grey)
],
))),
],
));
_drawerItem(String imagePath, String title) =>
Row(children: <Widget>[
Container(
padding: EdgeInsets.only(left: 12, right: 8, top: 10,
bottom: 10),
child: Image(
image: AssetImage(imagePath),
height: 22,
width: 22,
),
),
Container(
padding: EdgeInsets.only(left: 8, right: 8, top: 10, bottom:
10),
child: Text(
title,
style: _textStyle,
),
),
]);
_addDivider(Color color) => Padding(
padding: EdgeInsets.only(left: 12, right: 12),
child: Divider(
height: 1,
color: color,
),
);
Click on icon and text"Terms & Conditions" is working fine, but whole view is not clickable.enter image description here

Answer 1

You need to Wrap GestureDector with FittedBox. this widget helps you for scaling child to parent's size
_myDrawer() => Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: _myDrawerHeader(),
decoration: BoxDecoration(
color: const Color(0xFF0ea0aa),
),
),
Container(
width: double.infinity,
child: GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return TermNCondition();
}));
},
child: FittedBox( //
fit: BoxFit.cover // here is the magic
child:Row(
children: <Widget>[
_drawerItem('images/ic_tc.png', 'Terms &
Conditions'),
_addDivider(Colors.grey)
],
))
)),
],
));
_drawerItem(String imagePath, String title) =>
Row(children: <Widget>[
Container(
padding: EdgeInsets.only(left: 12, right: 8, top: 10,
bottom: 10),
child: Image(
image: AssetImage(imagePath),
height: 22,
width: 22,
),
),
Container(
padding: EdgeInsets.only(left: 8, right: 8, top: 10, bottom:
10),
child: Text(
title,
style: _textStyle,
),
),
]);
_addDivider(Color color) => Padding(
padding: EdgeInsets.only(left: 12, right: 12),
child: Divider(
height: 1,
color: color,
),
);
For more information about this Widget, please look for docs here

Answer 2

you just have to change the order of container and GesterDetector. I tried and it is working pretty well.
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return TermNCondition();
}));
},
child: Container(
width: double.infinity,
child: Row(
children: <Widget>[
_drawerItem('images/ic_tc.png', 'Terms &
Conditions'),
_addDivider(Colors.grey)
],
),
),
),