基础
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //去掉右上角的debug 图标
theme: ThemeData(
primaryColor: Colors.redAccent,
highlightColor: Colors.red, //点击下去时的颜色
splashColor: Colors.white30 //点击时候水波纹的颜色
),
home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gecer'),
centerTitle: true,
elevation: 0, //阴影大小
),
body: null,
drawer: Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text('left')],
),
),
endDrawer: Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text('right')],
),
),
);
}
}
- 在Scaffold中指定drawer即可,drawer代表左侧抽屉,endDrawer代表右侧抽屉。
- 创建抽屉时如果appBar中没有对leading(对应drawer)和actions进行定义(对应endDrawer),则会自动出现菜单图标,点击图标抽屉展开,如果已经定义图标则不会再次定义图标,需要另写代码关闭、打开抽屉。
代码控制抽屉关闭
Navigator.pop(context);
对抽屉进行美化
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //去掉右上角的debug 图标
theme: ThemeData(
primaryColor: Colors.redAccent,
highlightColor: Colors.red, //点击下去时的颜色
splashColor: Colors.white30 //点击时候水波纹的颜色
),
home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gecer'),
centerTitle: true,
elevation: 0, //阴影大小
),
body: null,
drawer: Drawer(
child: ListView(
//去上边栏灰色条
padding: EdgeInsets.all(0),
children: <Widget>[
//固定格式的用户信息介绍
UserAccountsDrawerHeader(
accountEmail: Text('780895965@qq.com'),
accountName: Text('Gecer'),
//头像
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://profile.csdnimg.cn/E/A/C/1_weixin_39370093'),
),
//美化控件
decoration: BoxDecoration(
//背景图片
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580361663095&di=bf5bcc19ed8fbc4585ada1e7c52efb4f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F05%2F20180205184357_irwly.thumb.700_0.jpg'))),
),
//列表项
ListTile(
title: Text('2020',textAlign: TextAlign.center ),
//右边图标
trailing: Icon(
Icons.grade,
color: Colors.red,
),
//左边图标
leading: Icon(
Icons.favorite,
color: Colors.red,
),
),
ListTile(
title: Text('国泰民安',textAlign: TextAlign.center,),
trailing: Icon(Icons.grade, color: Colors.orange),
leading: Icon(
Icons.favorite,
color: Colors.orange,
),
),
Divider(
color: Colors.amberAccent,
),
ListTile(
title: Text(
'祝大家新年快乐,阖家幸福',
style: TextStyle(color: Colors.orange),
),
trailing: Icon(Icons.grade, color: Colors.orange),
),
],
),
),
);
}
}