MaterialApp
先看下上圖的具體用法：
1. title：標題
2. actions：表示右側的按鈕的動作
3. leading：表示左側的按鈕的動作
4. flexibleSpace：
5. backgroundColor: Colors.red, //導航欄和狀態欄的的顏色
6. elevation: 10, //陰影的高度
7.bottom :導航欄下面顯示的widget
8.brightness ：狀態欄的亮度
9. iconTheme，左側圖表的樣式
12. toolbarOpacity: 0.5, //整個導航欄的不透明度
14. titleSpacing: 10, //標題兩邊的空白區域,
appBar代碼：
appBar: AppBar(
title: Container(
color: Colors.white10,
child: Row(
children: <Widget>[Text('標題1'), Text('標題2')],
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'Air it',
onPressed: null,
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'Restitch it',
onPressed: null,
),
],
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
), // 左側返回按鈕，可以有按鈕，可以有文字
flexibleSpace: Text('d12321312'),
backgroundColor: Colors.red, //導航欄和狀態欄的的顏色
elevation: 10, //陰影的高度
bottom: PreferredSize(
child: Text('bottom'),
preferredSize: Size(30, 30)), // 在appbar下面顯示的東西
brightness: Brightness.light, //控制狀態欄的顏色，lignt 文字是灰色的，dark是白色的
iconTheme: IconThemeData(
color: Colors.yellow,
opacity: 0.5,
size: 30), //icon的主題樣式,默認的顏色是黑色的，不透明為1，size是24
textTheme: TextTheme(), //這個主題的參數比較多,flutter定義了13種不同的字體樣式
centerTitle: true, //標題是否居中，默認為false
toolbarOpacity: 0.5, //整個導航欄的不透明度
bottomOpacity: 0.8, //bottom的不透明度
titleSpacing: 10, //標題兩邊的空白區域,
),
1. title：標題
可以是文字或者widget，可以自定義
如：
Container(
color: Colors.white10,
child: Row(
children: <Widget>[Text('標題1'), Text('標題2')],
),
),
2. actions：表示右側的按鈕的動作
是一個包含widget的數組：
actions: <Widget>[
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'Air it',
onPressed:(){} ,
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'Restitch it',
onPressed:(){},
),
],
上面表示兩個按鈕，同時還有點擊事件，只不過上面我把點擊事件寫成了空的。
3. leading：表示左側的按鈕的動作
這個也是一個widget，也可以自定義動作，如下：
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
), // 左側返回按鈕，可以有按鈕，可以有文字
4. flexibleSpace：
堆疊在工具欄和標簽欄后面。 它的高度與應用欄的整體高度相同。
flexible space 實際上並不靈活，除非[AppBar]的容器改變了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滾動時更改[AppBar]的高度。
也可以看下 FlexibleSpaceBar
flexibleSpace: Text('d12321312'),
flexibleSpace: FlexibleSpaceBar(
title: Text('flexibleSpace'),
background: Icon(Icons.add), //背景，一般是一個圖片，在title后面，[Image.fit] set to [BoxFit.cover].
centerTitle: true,
collapseMode: CollapseMode.pin, // 背景 固定到位，直到達到最小范圍。 默認是CollapseMode.parallax(將以視差方式滾動。)，還有一個是none，滾動沒有效果
),
5. backgroundColor: Colors.red, //導航欄和狀態欄的的顏色
導航欄的顏色和樣式可以再Main.dart的MaterialApp里面配置統一的。
但有時間我們的某些頁面有單獨的設計，這個背景也是可以修改的。
6. elevation: 10, //陰影的高度
默認在導航欄的下面有4的高度陰影，這個也可以修改的
7.bottom :導航欄下面顯示的widget
看上面圖片中的bottom文字
bottom: PreferredSize(
child: Text('bottom'),
preferredSize: Size(30, 30)
), // 在appbar下面顯示的東西
其中這個bottom是需要PreferredSize的，里面有child和寬高，寬高用size來設置
8.brightness ：狀態欄的亮度
這與[backgroundColor]，[iconTheme]，[textTheme]一起設置。
默認是和 ThemeData.primaryColorBrightness一致的.
Brightness.light, 白底黑字 Brightness.dark, 黑底白字
9.iconTheme，左側圖標的樣式
iconTheme: IconThemeData(
color: Colors.yellow,
opacity: 0.5,
size: 30
), //icon的主題樣式,默認的顏色是黑色的，不透明為1，size是24
表示顏色是黃色，不透明度是0.5，最大值是1；以及大小是30，默認的大小是24
10.textTheme：字體的樣式
我們要設置的話一般用merge，這樣不會改變其他的值。
默認有13中樣式：
NAME SIZE WEIGHT SPACING 2018 NAME Color
display4 112.0 thin 0.0 headline1 grey
display3 56.0 normal 0.0 headline2 grey
display2 45.0 normal 0.0 headline3 grey
display1 34.0 normal 0.0 headline4 grey
headline 24.0 normal 0.0 headline5 black
title 20.0 medium 0.0 headline6 black
subhead 16.0 normal 0.0 subtitle1 black
body2 14.0 medium 0.0 bodyText1 black
body1 14.0 normal 0.0 bodyText2 black
caption 12.0 normal 0.0 caption grey
button 14.0 medium 0.0 button black
subtitle 14.0 medium 0.0 subtitle2 black
overline 10.0 normal 0.0 overline grey
其中thin 表示字體的粗細為FontWeight.w100
normal是FontWeight.w400
medium是FontWeight.w500
字符間距為0.0
size就是字體的大小
////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////
深色模式下
11.centerTitle：標題是否居中
centerTitle: true, //標題是否居中，默認為false
默認是false，一般我們的設計都是把導航欄的標題居中，不遵循android的md設計，都是按照蘋果的設計來的
12. toolbarOpacity: 0.5, //整個導航欄的不透明度
13. bottomOpacity: 0.8, //bottom的不透明度
14. titleSpacing: 10, //標題兩邊的空白區域
示例所在的位置：https://github.com/LiuC520/flutterlayout/blob/master/lib/material/appbar.dart