共计 3900 个字符，预计需要花费 10 分钟才能阅读完成。
1 MaterialApp
1.1 什么是 MaterialApp？
MaterialApp 是我们使用 Flutter 开发中最常用的符合 Material Design 设计理念的入口 Widget。你可以将它类比成为网页中的 <html></html>，且它自带路由、主题色，<title> 等功能。
1.2 MaterialApp 的几个属性
1.2.1 title
Strig 类型，该属性会在 Android 应用管理器的 App 上方显示，对于 iOS 设备是没有效果的。如下面代码所示：
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(
title: ‘ 一个 Flutter 应用 ’,
home: Text(‘hello flutter’,
style: TextStyle(
color: Colors.white, decoration: TextDecoration.none))));
}
1.2.2 home
Widget 类型，这是在应用程序正常启动时首先显示的 Widget，除非指定了 initialRoute。如果 initialRoute 显示失败，也该显示该 Widget。
需要注意的是, 如果你指定了 home 属性，则在 routes 的路由表中不允许出现 / 的命名路由。
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(
title: ‘ 一个 Flutter 应用 ’,
home: Center(
child: Text(‘hello flutter’,
style: TextStyle(
color: Colors.white, decoration: TextDecoration.none)),
)));
}
1.2.3 routes
Map<String, WidgetBuilder> 类型，是应用的顶级路由表。当我们再使用 Navigator.pushNamed 进行命名路由的跳转时，会在此路表中进行查找并跳转。如果你的应用程序只有一个页面，则无需使用 routes，直接指定 home 对应的 Widget 即可。
下面的例子中，定义了两个路由：/home 和 /detail，并使用 GestureDetector 定义了点击事件已实现路由跳转：
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(title: ‘ 一个 Flutter 应用 ’, home: HomePage(), routes: {
‘/home’: (BuildContext context) => HomePage(),
‘/detail’: (BuildContext context) => DetailPage()
}));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
onTap: () {
Navigator.pushNamed(context, ‘/detail’);
},
child: Text(‘ 首页，点击跳转详情页 ’,
style: TextStyle(
fontSize: 20.0,
color: Colors.white, decoration: TextDecoration.none))));
}
}
class DetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
onTap: () {
Navigator.pushNamed(context, ‘/home’);
},
child: Text(‘ 详情页，点击跳转首页 ’,
style: TextStyle(
fontSize: 20.0,
color: Colors.white, decoration: TextDecoration.none))));
}
}
2 Scaffold
2.1 什么是 Scaffold?
Scaffold 通常被用作 MaterialApp 的子 Widget，它会填充可用空间，占据整个窗口或设备屏幕。Scaffold 提供了大多数应用程序都应该具备的功能，例如顶部的 appBar，底部的 bottomNavigationBar，隐藏的侧边栏 drawer 等。
2.2 Scaffold 的几个属性
2.2.1 appBar
PreferredSizeWidget 类型，显示在 Scaffold 的顶部区域。
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(
title: ‘ 一个 Flutter 应用 ’,
home: Scaffold(
appBar: AppBar(
title: Text(‘ 首页 ’))
)
)
);
}
2.2.2 drawer
Widget drawer 类型，通常用来形成一个汉堡包按钮显示其侧边栏。
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(
title: ‘ 一个 Flutter 应用 ’,
home: Scaffold(
appBar: AppBar(title: Text(‘ 首页 ’)),
drawer: Drawer(
child: Column(
children: <Widget>[
DrawerItem(1, ‘ 列表 1 ’),
DrawerItem(2, ‘ 列表 2 ’),
DrawerItem(3, ‘ 列表 3 ’),
DrawerItem(4, ‘ 列表 4 ’),
DrawerItem(5, ‘ 列表 5 ’)
],
)))));
}
class DrawerItem extends StatelessWidget {
final int id;
final String name;
DrawerItem(this.id, this.name);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border:
Border(bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))),
),
height: 52.0,
child: FlatButton(
onPressed: () {},
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[Text(id.toString()), Text(‘ – ‘), Text(name)],
)),
);
}
}
2.2.3 bottomNavigationBar
Widget bottomNavigationBar 类型，用户显示底部的 tab 栏，items 必须大于 2 个。
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(
title: ‘ 一个 Flutter 应用 ’,
home: Scaffold(
appBar: AppBar(
title: Text(‘ 首页 ’),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: 1,
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.account_balance), title: Text(‘ 银行 ’)),
new BottomNavigationBarItem(
icon: Icon(Icons.contacts), title: Text(‘ 联系人 ’)),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text(‘ 音乐 ’))
],
))));
}
2.2.4 body
Widget 类型，Scaffold 的主题内容。
import ‘package:flutter/material.dart’;
void main() {
runApp(MaterialApp(
title: ‘ 一个 Flutter 应用 ’,
home: Scaffold(
appBar: AppBar(
title: Text(‘ 首页 ’),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: 1,
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.account_balance), title: Text(‘ 银行 ’)),
new BottomNavigationBarItem(
icon: Icon(Icons.contacts), title: Text(‘ 联系人 ’)),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text(‘ 音乐 ’))
],
),
body: Center(
child: Text(‘ 这是联系人页面 ’),
),
)));
}
