演示代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.deepPurple, //主题背景颜色
highlightColor: Colors.purple, //按下按钮时 高亮颜色
splashColor: Colors.white30,
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70, //页面背景颜色
appBar: AppBar(
// leading在左侧
// 注意:如果使用Drawer,不要自己去写leading,系统会默认有leading,并且能关联打开Drawer动作
// leading: IconButton(
// icon: Icon(Icons.menu),
// tooltip: 'Menu show',
// onPressed: () => debugPrint('点击了 Menu!'),
// ),
// title 中间
title: Text('RedKey',
style: TextStyle(
color: Colors.redAccent,
)),
// actions 在右边,可以添加多个图标
actions: <Widget>[
IconButton(
icon: Icon(Icons.search), //图标
tooltip: 'Search show', //注释
onPressed: () => debugPrint('点击了 Search!'), //点击事件
),
IconButton(
icon: Icon(Icons.more_vert),
tooltip: 'More show',
onPressed: () => debugPrint('点击了 more_vert!'),
),
],
),
// drawer 左边显示抽屉控件,endDrawer 右边显示抽屉控件
drawer: DrawerWidget(),
endDrawer: DrawerWidget());
}
}
// Drawer 控件内容
class DrawerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text(
'RedKeyset',
style: TextStyle(fontWeight: FontWeight.bold),
),
accountEmail: Text('redkeyset@gmail.com'),
//定义用户头像,CircleAvatar 指定成圆形
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('https://dwz.cn/YfHol40M'),
),
decoration: BoxDecoration(
color: Colors.deepOrangeAccent, //区域背景颜色
image: DecorationImage(
image: NetworkImage('https://dwz.cn/N00Lpoj0'),
fit: BoxFit.cover,
// ColorFilter 颜色滤镜 BlendMode混合模式
colorFilter: ColorFilter.mode(
Colors.blue[300]
.withOpacity(0.2), // blueAccent 这一类的颜色会报错
BlendMode.srcOver))),
),
ListTile(
leading: Icon(Icons.access_alarm,
color: Colors.blueAccent, size: 18.0), //指定Icon的颜色 和 大小
title:
Text('新闻', textAlign: TextAlign.left), //TextAlign.left 文字左对齐
onTap: () => Navigator.pop(context)),
ListTile(
title: Text('消息', textAlign: TextAlign.center),
onTap: () => Navigator.pop(context)),
ListTile(
title: Text('关于我们',
textAlign: TextAlign.right), //TextAlign.right 文字右对齐
trailing: Icon(Icons.account_balance,
color: Colors.orangeAccent, size: 28.0),
onTap: () => Navigator.pop(context))
],
),
);
}
}
演示效果:
drawer 左侧抽屉,endDrawer右侧抽屉,都可以滑动展示。