I'm new to Programming and Flutter is the first Language I'm learning. I am trying to create a Dashboard, which displays 6 Elements. Creating and displaying the Elements worked for now, but I don't know how to make the Cards tappable, so that when a User clicks on it, it directs you to the Page displayed on it.
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
// to get size
var size = MediaQuery.of(context).size;
// style
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>[
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,
)
],
),
),
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,
)
],
),
),
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,
)
],
),
),
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,
)
],
),
),
],
),
),
],
),
),
),
],
),
);
}
}
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 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.
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),
)
));
}
}