How to make each _buildrow go the next page in Flutter? - flutter

Question

i got problem when i dont know to make each buildrow go to each page?this is for buildDrawer can you help me with this?
builDrawer fuction this for profile screen.dart
_buildDrawer() {
return ClipPath(
clipper: OvalRightBorderClipper(),
child: Drawer(
Container(
height: 90,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient:
LinearGradient(colors: [Colors.pink, Colors.red])),
child: CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(profile),
),
),
SizedBox(height: 5.0),
Text(
"Mohd Amin bin Yaakob",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
Text(
"Pegawai",
style: TextStyle(color: active, fontSize: 16.0),
),
SizedBox(height: 30.0),
_buildRow(Icons.home, "Home"),
_buildDivider(),
_buildRow(Icons.person_pin, "Your profile"),
_buildDivider(),
_buildRow(Icons.settings, "Settings"),
_buildDivider(),
_buildRow(Icons.email, "Contact us"),
_buildDivider(),
_buildRow(Icons.info_outline, "Help"),
_buildDivider(),
],
),
),
),
),
),
);
}
How to make Functional Navigator each buildRow

Answer 1

You need to make rows with clickable widgets like listtile.
Try this inside your _buildRow()
Widget _buildRow(IconData icon, String title) {
final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
return ListTile(
title: Text( title, style: tStyle, ),
leading: Icon( icon, color: active, ),
onTap: () {
// Your navigation code here
},
);
}
You can remove the container as well and try contentPadding in ListTile
Its explained in the drawer documentation https://docs.flutter.dev/cookbook/design/drawer

Answer 2

You can require an onTap function in your _buildRow method. Also wrap you Container inside an InkWell widget and this function in onTap property.
Following is the revised code:
Widget _buildRow(IconData icon, String title, VoidCallback onTap) {
final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
return InkWell(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
children: [
Icon(
icon,
color: active,
),
SizedBox(width: 10.0),
Text(
title,
style: tStyle,
),
],
),
),
onTap: onTap,
);
}
When calling the above function, provide the onTap callback like this:
_buildRow(Icons.home, "Home", () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return HomePage();
},
),
);
});