Material Design風格元件
1. 概述
Material Design是由谷歌推出的全新設計語言，這種設計語言旨在為手機、平板電腦、桌上型電腦和其他平臺提供更一致、更廣泛的外觀和感覺。Material Design風格是一直非常有質感的設計風格，並會提供一些預設的互動動畫。
2. App結構和導航元件
2.1 MaterialApp(應用元件)
MaterialApp代表使用Material Design風格的應用，裡面包含了其他所需的基本控制元件。官方提供的示例demo就是從MaterialApp這個主元件開始的。
MaterialApp元件常見屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| title | String | 應用程式的標題。該標題出現在以下位置：Android：工作管理員的程式快照上； IOS：程式切換管理器中 |
| theme | ThemeData | 定義應用所使用的主題顏色，可以指定主題中每個控制元件的顏色 |
| color | Color | 應用的主要顏色值，即primary color |
| home | Widget | 用來定義當前應用開啟時所顯示的介面 |
| routes | Map<String, WidgetBuilder> | 定義應用中頁面跳轉規則 |
| initialRoute | String | 初始化路由 |
| onGenerateRoute | RouteFactory | 路由回撥函式。當通過Navigator.of(context).pushNamed跳轉路由的時候，在routes查詢不到時，會呼叫該方法 |
| onLocaleChanged | - | 當系統修改語言的時候，會觸發這個回撥 |
| navigatorObservers | List<NavigatorObserver> | 導航觀察器 |
| debugShowMaterialGrid | bool | 是否顯示佈局網格，用來除錯UI的工具 |
| showPerformanceOverlay | bool | 顯示效能標籤 |
2.1.1 設定主頁
使用home屬性設定應用的主頁，即整個應用的主元件。
2.1.2 路由處理
routes物件是一個Map<String, WidgetBuilder>。當使用Navigator.pushNamed來跳轉路由的時候，通過routes查詢路由名字，然後使用對應的WidgetBuilder來構造一個帶有頁面切換動畫的MaterialPageRoute。如果應用只有一個介面，則不用設定整個屬性，使用home即可。
2.1.3 自定義主題
應用程式的主題，各種定製的顏色都可以設定，用於程式主題切換。
2.2 Scaffold(腳手架元件)
Scaffold實現了基本的Material Design佈局。只要是在Material Design中定義過的單個介面顯示的佈局元件元素，都可以使用Scaffold來繪製。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| appBar | AppBar | 顯示在介面頂部的一個AppBar |
| body | Widget | 當前介面所顯示的主要內容 |
| floatingActionButton | Widget | 在Material Design中定義的一個功能按鈕 |
| persistentFooterButtons | List< Widget> | 固定在下方顯示的按鈕 |
| drawer | Widget | 側邊欄元件 |
| bottomNavigatorBar | Widget | 顯示在底部的導航欄 |
| backgroudColor | Color | 背景顏色 |
| resizeToAvoidBottomPadding | bool | 控制介面內容body是否重新佈局來避免底部被覆蓋，比如當鍵盤顯示時，重新佈局避免鍵盤蓋住內容。預設為true |
2.3 AppBar(應用按鈕元件)
應用按鈕元件有AppBar和SliverAppBar。它們是Material Design中的AppBar，也就是Android中的ToolBar。 AppBar和SliverAppBar都繼承自StatefulWidget，兩者的區別在於AppBar的位置是固定在應用最上面的；而SliverAppBar是可以跟隨內容滾動的。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| leading | Widget | null | 在標題前面顯示一個元件，在首頁通常顯示應用的logo；其他介面通常顯示返回按鈕 |
| title | Widget | null | 當前介面的標題 |
| actions | List<Widget> | null | 一個Widget列表，常用選單通常使用IconButton，不常用的通常使用PopupMenuButton顯示三個點，點選後彈出二級選單 |
| bottom | PreferredSizeWidget | null | 通常是一個TabBar。用來在標題下方顯示一個Tab導航欄 |
| elevation | double | 4 | 控制AppBar下方陰影的高度 |
| flexibleSpace | Widget | null | 一個顯示在AppBar下方的元件，高度和AppBar一樣，可以實現一些特殊的效果，該屬性通常在SliverAppBar中使用 |
| backgroundColor | Color | ThemeData.primaryColor | 背景色 |
| brightness | Brightness | ThemeData.primaryColorBrightness | AppBar的亮度，有白色和黑色兩種主題 |
| iconTheme | IconThemeData | ThemeData.primaryIconTheme | AppBar上圖示的顏色、透明度和尺寸資訊 |
| textTheme | TextTheme | ThemeData.primaryTextTheme | AppBar上文字樣式 |
| centerTitle | bool | - | 標題是否居中顯示，不同作業系統，顯示方式不一樣 |
2.4 BottomNavigatorBar(底部導航欄)
BottomNavigatorBar是底部導航欄，可以很容易地在tab之間切換和瀏覽頂級檢視。
常見屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| currentIndex | int | 當前索引 |
| fixedColor | Color | 選中按鈕的顏色。不指定則使用系統主題色 |
| iconSize | double | 按鈕圖形大小 |
| items | List<BottomNavigatorBarItem> | 底部導航欄按鈕集。每一項是一個BottomNavigatorBarItem，包含icon圖示和title文字 |
| onTap | ValueChanged<int> | 按下按鈕的回撥事件。需要根據返回的索引設定當前索引 |
2.5 TabBar(水平選項卡及檢視元件)
TabBar是一個顯示水平選項卡的Material Design元件，通常需要配套Tab選項元件及TabBarView頁面檢視元件一起使用。 TabBar常見屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| isScrolled | bool | 是否可以水平滾動 |
| tabs | List<Widget> | Tab選項列表 |
Tab常見屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| icon | Widget | Tab圖示 |
| text | String | Tab文字 |
TabBarView常見屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| controller | TabController | 指定檢視的控制器 |
| childrens | List<Widget> | 檢視元件的child為一個列表，一個選項卡對應一個檢視 |
2.6 Drawer(抽屜元件)
Drawer可以實現類似抽屜拉入推出的效果，通常與ListView組合使用。
Drawer常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| child | Widget | - | Drawer的child可以放置任意可顯示的元件 |
| elevation | double | 16 | 陰影尺寸 |
Drawer可以新增頭部效果：
- DrawerHeader：展示基本資訊
- UserAccountsDrawerHeader：展示使用者頭像、使用者名稱、Email等資訊
DrawerHeader常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| decoration | Decoration | header區域的decoration，通常用來設定背景顏色或背景圖片 |
| curve | Curve | 如果decoration發生了變化，則會使用curve設定的變化曲線和duration設定的動畫時間來做一個動畫效果 |
| child | Widget | Header裡面所顯示的內容控制元件 |
| padding | EdgeInsetsGeometry | Header裡面內容控制元件的padding值，如果child為null，該值無效 |
| margin | EdgeInsetsGeometry | Header四周的間隙 |
UserAccountsDrawerHeader常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| margin | EdgeInsetsGeometry | Header四周的間隙 |
| decoration | Decoration | header區域的decoration，通常用來設定背景顏色或背景圖片 |
| currentAccountPicture | Widget | 用來設定當前使用者的頭像 |
| otherAccountsPicture | Widget | 用來設定當前使用者其他賬號的頭像 |
| accountName | Widget | 當前使用者的名字 |
| accountEmail | Widget | 當前使用者的Email |
| onDetailsPressed | VoidCallback | 當accountName或者accountEmail被點選的時候所觸發的回撥函式，可以用來顯示其他額外的資訊 |
3. 按鈕和提示元件
3.1 FloatingActionButton(懸停按鈕元件)
FloatingActionButton對應一個圓形圖示按鈕，懸停在內容之上，以展示應用程式中的主要動作。類似IOS裡的小白點。
FloatingActionButton常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| child | - | - | - |
| tooltip | - | - | - |
| foregroundColor | - | - | - |
| backgroundColor | - | - | - |
| elevation | - | - | - |
| highlightElevation | - | - | - |
| onPressed | - | - | - |
| shape | - | - | - |
3.2 FlatButton(扁平按鈕元件)
FlatButton是一個扁平的Material Design風格的按鈕，點選時會有一個陰影效果。
3.3 PopupMenuButton(彈出選單元件)
PopupMenuButton一般放在應用右上角，表示更多操作，選單項使用PopupMenuItem元件。
PopupMenuButton常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| child | - | - |
| icon | - | - |
| itemBuilder | - | - |
| onSelected | - | - |
3.4 SimpleDialog(簡單對話方塊元件)
SimpleDialog用於設計簡單的對話方塊，可以顯示附加的提示或操作。SimpleDialog通常需要配合SimpleDialogOption元件一起使用。
SimpleDialog常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| children | List<Widget> | 對話方塊子項 |
| title | Widget | 通常是一個文字控制元件 |
| contentPadding | EdgeInsetsGeometry | 內容部分間距 |
| titlePadding | EdgeInsetsGeometry | 標題部分間距 |
- 通常對話方塊都是由某個動作來觸發渲染的，比如點選按鈕，點選選單等。所以對話方塊一般要封裝在一個方法裡實現。
- 另外這個過程是非同步的需要加入async/await處理。
3.5 AlertDialog(提示對話方塊元件)
AlertDialog比SimpleDialog對話方塊又複雜一些，不僅有提示內容，還有一些操作按鈕，如確定和取消等，內容部分可以用SingleChildScrollView進行包裹。
AlertDialog常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| actions | List<Widget> | 對話方塊底部操作按鈕，如確定、取消等 |
| title | Widget | 通常是一個文字控制元件 |
| contentPadding | EdgeInsetsGeometry | 內容部分間距 |
| content | Widget | 內容部分，通常為對話方塊的提示內容 |
| titlePadding | EdgeInsetsGeometry | 標題部分間距 |
3.6 SnackBar(輕量提示元件)
SnackBar是一個輕量級訊息提示元件，在螢幕底部顯示。
SnackBar常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| action | SnackBarAction | - | 提示訊息裡執行的動作，比如使用者想撤銷時可以點選操作 |
| animation | Animation<double> | - | 給元件新增動畫效果 |
| content | Widget | - | 提示訊息內容，通常為文字元件 |
| duration | Duration | 4.0秒 | 動畫執行的時長 |
| backgroundColor | Color | - | 訊息皮膚的背景色 |
4. 其他元件
4.1 TextField(文字框元件)
TextField就是用來做文字輸入的元件。
- 注意與Text元件區分，Text主要用於顯示文字，不接受文字輸入。
TextField常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| maxLength | int | 最大長度 |
| maxLines | int | 最大行數 |
| autocorrect | bool | 是否自動更正 |
| autofocus | bool | 是否自動對焦 |
| obscureText | bool | 是否是密碼 |
| textAlign | TextAlign | 文字對齊方式 |
| style | TextStyle | 文字的樣式 |
| inputFormatters | List<TextInputFormatter> | 允許的輸入格式 |
| onChanged | VoidChanged<String> | 內容改變時回撥 |
| onSubmitted | VoidChanged<String> | 內容提交時回撥 |
| enabled | bool | 是否禁用 |
4.2 Card(卡片元件)
Card內容可以由大多數型別的元件構成，但通常與ListTitle一起使用。Card有一個child，但可以是支援多個child的Row、Column、ListView、GridView或其他小部件。預設情況下，Card將其大小縮小為0畫素。可以使用SizedBox來限制Card的大小。
Card常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| child | Widget | - | 元件的子元素，任意Widget都可以 |
| margin | EdgeInsetsGeometry | - | 圍繞在decoration和child之外的空白區域，不屬於內容區域 |
| shape | ShapeBorder | RoundedRectangleBorder | Card的陰影效果，預設的陰影效果為圓角的長方形邊。弧度為4.0 |
Cupertino風格元件
1. 概述
Cupertino風格元件即IOS風格元件。主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。目前元件庫還沒有Material Design風格元件豐富。
2. CupertinoActivityIndicator元件
IOS風格loading指示器。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| radius | double | 10.0 | 載入圖形的半徑 |
| animating | bool | true | 是否播放載入動畫 |
3 CupertinoAlertDialog
與Material Design風格的AlertDialog類似。
常見屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| actions | List<Widget> | 對話方塊底部操作按鈕。如確定、取消。 |
| title | Widget | 對話方塊標題，通常是一個文字 |
| content | Widget | 對話方塊內容部分，通常為提示內容 |
3. CupertinoButton
IOS風格按鈕。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| color | Color | - | 按鈕顏色 |
| disableColor | Color | ThemeData.disabledColor | 按鈕禁用狀態顏色 |
| onPressed | VoidCallback | - | 按鈕按下時回撥函式 |
| child | Widget | - | 按鈕的child通常為Text文字，顯示按鈕名字 |
| enable | bool | true | 是否為禁用狀態 |
4. Cupertino導航元件
4.1 CupertinoTabScaffold
選項卡元件，將選項卡按鈕與選項卡檢視繫結。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| tabBar | CupertinoTabBar | 選項卡按鈕，通常由圖示和文字組成 |
| tabBuilder | IndexedWidgetBuilder | 選項卡檢視構造器 |
4.2 CupertinoTabBar
選項卡按鈕，通常由BottomNavigationBarItem組成包含圖示加文字。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| items | List<BottomNavigationBarItem> | 選項卡按鈕集合 |
| backgroundColor | Color | 選項卡按鈕背景色 |
| activeColor | Color | 選中按鈕前景色 |
| iconSize | double | 選項卡圖示大小 |
4.3 CupertinoTabView
選項卡檢視。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| builder | WidgetBuilder | 選項卡檢視構造器 |
| routes | Map<String, WidgetBuilder> | 選項卡檢視路由 |
4.4 CupertinoPageScaffold
頁面的基本佈局結構。包含內容和導航欄。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| backgroudColor | Color | 頁面背景色 |
| navigationBar | ObstructingPreferredSizeWidget | 頂部導航欄按鈕。包含左中右三個子元件 |
| child | Widget | 頁面的主要內容 |
4.5 CupertinoNavigationBar
導航欄結構元件。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| middle | Widget | 導航欄中間元件，通常為頁面標題 |
| trailing | Widget | 導航欄右邊元件，通常為選單按鈕 |
| leading | Widget | 導航欄左邊元件，通常為返回按鈕 |