在 Flutter 中进行简单的 仪表盘 UI 设计
本教程中，我将向您展示如何在 Flutter 中进行简单的 仪表盘 UI 设计。 对于本教程，我们需要添加一些图像资产，因此创建一个新文件夹并将其命名为assets并将资产路径添加到pubspec.yaml文件中。
现在我们将编码我们的布局
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
),
)
],
),
)
),
),
),
],
),
),
)
],
)
)
);
}
}
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-07-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读