It can be done by making the desired card clickable by using **InkWell** widget, which takes the **onTap** parameter to run the desired function on click gesture and [Navigator][1] to change routes of the screens.
As shown below, you can *pass arguments* to the *target screen* and can also *return arguments* back to the *parent screen.*
[1]: https://docs.flutter.dev/cookbook/navigation/navigation-basics
``` dart
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
var cardTextStyle = TextStyle(
fontFamily: "Open Sans",
fontSize: 14,
color: Color.fromRGBO(63, 63, 63, 1));
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: size.height * .3,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topCenter, image: AssetImage('')),
),
),
SafeArea(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
height: 64,
margin: EdgeInsets.only(bottom: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 32,
backgroundImage: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Crystal_Clear_kdm_user_female.svg/2048px-Crystal_Clear_kdm_user_female.svg.png'),
),
SizedBox(
width: 16,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'User',
style: TextStyle(
fontFamily: "Open Sans",
color: Colors.black,
fontSize: 20),
),
Text(
'ID:4101410141',
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontFamily: "Open Sans"),
)
],
)
],
),
),
Expanded(
child: GridView.count(
mainAxisSpacing: 1,
crossAxisSpacing: 1,
primary: false,
crossAxisCount: 4,
children: <Widget>[
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage(targetName: "Description",)));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(''),
),
Text(
'Description',
style: cardTextStyle,
)
],
),
),
),
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage(targetName: "News",)));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(''),
),
Text(
'News',
style: cardTextStyle,
)
],
),
),
),
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage(targetName: "Information",)));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Messagebox_info.svg/1200px-Messagebox_info.svg.png'),
),
Text(
'Information',
style: cardTextStyle,
)
],
),
),
),
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage(targetName: "Registration",)));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(''),
),
Text(
'Registration',
style: cardTextStyle,
)
],
),
),
),
],
),
),
],
),
),
),
],
),
);
}
}
class TargetPage extends StatelessWidget {
const TargetPage({Key? key, this.targetName = 'Default Value'}) : super(key: key);
final String targetName ;
@override
Widget build(BuildContext context) {
return SafeArea(child: Scaffold(
body: Center(
child: Text(targetName),
)
));
}
}
```
Please check the full code edit from your code. Actually you are using two FloatingActionButton. So you need to use two heroTag with different name. I already added in the code. No problem with NewTrip class.
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
@override
_Page0State createState() => _Page0State();
}
class _Page0State extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: [
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: [
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: [
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: [
//greeting text
Row(
children: [
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn",
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewTrip()),
);
},
),
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn1",
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
NewTrip class
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}