Flutter GestureDetector is not working on functions - function

Question

class GridDashboard extends StatefulWidget {
final Function onTap;
const GridDashboard({Key key, this.onTap}) : super(key: key);
#override
_GridDashboardState createState() => _GridDashboardState();
}
class _GridDashboardState extends State<GridDashboard> {
Items item1 = new Items(
title: 'Books',
img: 'assets/images/open-book.png',
onTap: () {
Books();
});
Items item2 = new Items(
title: 'Audio',
img: 'assets/images/headphones.png',
onTap: () => print('Audio')); // it works when I just print smth
Items item3 = new Items(
title: 'Videos',
img: 'assets/images/play-button.png',
onTap: () {
Videos();
});
#override
Widget build(BuildContext context) {
List<Items> myList = [item1, item2, item3];
return Flexible(
child: GridView.count(
childAspectRatio: 1.0,
padding: EdgeInsets.only(left: 30, right: 20, top: 220),
crossAxisCount: 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
children: myList.map((data) {
return GestureDetector(
onTap: data.onTap, // this line is not working
child: Container(
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.circular(35),
boxShadow: [
BoxShadow(
color: Color(0xFF373234),
blurRadius: 6.0,
offset: Offset(0, 2),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(data.img, width: 45),
SizedBox(height: 15),
Text(
data.title,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
);
}).toList(),
),
);
}
}
class Items {
String title;
String img;
Function onTap;
Items({this.img, this.title, this.onTap});
}
Hi people.
I am building an android app. The above code is for a dashboard (menu) section of my code. The GestureDetector onTap function is not working when I want it to go to another screen. But it works if I just want to print out smth. If you know how to solve this issue can you please help here ?
Thank you.

Answer 1

You can use named routes.
For Example :
Add the routes to you MaterialApp
void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/books': (context) => Books(),
'/videos': (context) => Videos(),
},
));
}
Change onTap to go to the specific page
onTap: () {
Navigator.pushNamed(context, '/books');
});
Make changes to the widgets accordingly.