In this tutorial, I will show you how to make a simple Dashboard UI design in Flutter.
for this tutorial, we will need to add some image assets, so creates a new folder and call it assets and add the assets path to the pubspec.yaml file.
Now we will code the of our layout
Assets for this project
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home:Dashboard()
)
);
class Dashboard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.menu, color: Colors.white,size: 52.0,),
Image.asset("assets/image.png",width: 52.0,)
],
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
"Welcome, Doctor code \nSelect an option",
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.start,
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Center(
child: Wrap(
spacing:20,
runSpacing: 20.0,
children: <Widget>[
SizedBox(
width:160.0,
height: 160.0,
child: Card(
color: Color.fromARGB(255,21, 21, 21),
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)
),
child:Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.asset("assets/todo.png",width: 64.0,),
SizedBox(
height: 10.0,
),
Text(
"Todo List",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0
),
),
SizedBox(
height: 5.0,
),
Text(
"2 Items",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100
),
)
],
),
)
),
),
),
SizedBox(
width:160.0,
height: 160.0,
child: Card(
color: Color.fromARGB(255,21, 21, 21),
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)
),
child:Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.asset("assets/note.png",width: 64.0,),
SizedBox(
height: 10.0,
),
Text(
"Notes",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0
),
),
SizedBox(
height: 5.0,
),
Text(
"12 Items",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100
),
)
],
),
)
),
),
),
SizedBox(
width:160.0,
height: 160.0,
child: Card(
color: Color.fromARGB(255,21, 21, 21),
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)
),
child:Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.asset("assets/calendar.png",width: 64.0,),
SizedBox(
height: 10.0,
),
Text(
"Agenda",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0
),
),
SizedBox(
height: 5.0,
),
Text(
"4 Items",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100
),
)
],
),
)
),
),
),
SizedBox(
width:160.0,
height: 160.0,
child: Card(
color: Color.fromARGB(255,21, 21, 21),
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)
),
child:Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.asset("assets/settings.png",width: 64.0,),
SizedBox(
height: 10.0,
),
Text(
"Settings",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0
),
),
SizedBox(
height: 5.0,
),
Text(
"6 Items",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100
),
)
],
),
)
),
),
),
],
),
),
)
],
)
)
);
}
}
Flutter Dashboard UI
Reviewed by Medics
on
May 01, 2020
Rating:
Reviewed by Medics
on
May 01, 2020
Rating:
Very Useful thank you doc
ReplyDelete