Flutter - Drawer class

Flutter 的 Drawer widget 需搭配 Scaffold 使用,可用以設定 Scaffold 左側的選單。


其建構子如下:

Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel })


屬性如下:

Name Type Description
child Widget The widget below this widget in the tree.
elevation double The z-coordinate at which to place this drawer. This controls the size of the shadow below the drawer.
semanticLabel String The semantic label of the dialog used by accessibility frameworks to announce screen transitions when the drawer is opened and closed.
hashCode int The hash code for this object.
key Key Controls how one widget replaces another widget in the tree.
runtimeType Type A representation of the runtime type of the object.


方法如下:

Name Return Type Description
build(BuildContext context) Widget Describes the part of the user interface represented by this widget.
createElement() StatelessElement Creates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren() List Returns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder properties) void Add additional properties associated with the node.
noSuchMethod(Invocation invocation) dynamic Invoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode Returns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a one-line detailed description of the object.
toStringShort() String A short, textual description of this widget.


使用時只要建立出 Drawer 實體,並指給 Scoffold 的 drawer 屬性即可。

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
drawer: new Drawer())));
}




可搭配 ListTile 設定 Drawer 選單的選項。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new ListTile(
leading: const Icon(Icons.home),
title: new Text('Home')),
new ListTile(
leading: const Icon(Icons.favorite),
title: new Text('Favorite')),
],
),
))));
}



搭配 DrawerHeader 設定 Drawer 的標頭。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(
child: new Text('Drawer Header'),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new ListTile(
leading: const Icon(Icons.home),
title: new Text('Home')
),
new ListTile(
leading: const Icon(Icons.favorite),
title: new Text('Favorite')
),
],
),
))));
}



搭配 UserAccountsDrawerHeader 設定顯示有使用者資訊的 Drawer 標頭。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text('LarryNung'),
accountEmail: new Text('email@example.com')),
new ListTile(
leading: const Icon(Icons.home),
title: new Text('Home')
),
new ListTile(
leading: const Icon(Icons.favorite),
title: new Text('Favorite')
),
],
),
))));
}