1 MaterialApp1.1 什么是MaterialApp？MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的<html></html>，且它自带路由、主题色，<title>等功能。1.2 MaterialApp的几个属性1.2.1 titleStrig类型，该属性会在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 homeWidget类型，这是在应用程序正常启动时首先显示的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 routesMap<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 Scaffold2.1 什么是Scaffold?Scaffold通常被用作MaterialApp的子Widget，它会填充可用空间，占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能，例如顶部的appBar，底部的bottomNavigationBar，隐藏的侧边栏drawer等。2.2 Scaffold的几个属性2.2.1 appBarPreferredSizeWidget类型，显示在Scaffold的顶部区域。import ‘package:flutter/material.dart’;void main() { runApp(MaterialApp( title: ‘一个Flutter应用’, home: Scaffold( appBar: AppBar( title: Text(‘首页’)) ) ) );}2.2.2 drawerWidget 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 bottomNavigationBarWidget 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 bodyWidget类型，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(‘这是联系人页面’), ), )));}