Flutter元件精講與實戰(上下)

趙龍，一個愛騎自行車的程序員，也喜歡喝點茶，致力於分享自己的所感所悟，為移動應用程序開發生態圈的建設貢獻自己的一份力量。現任知輪科技大前端部門架構師，兼任山西軟為科技有限公司技術顧問，CSDN認證年度博客專家，CSDN知名專欄作者，網易雲課堂“玩轉大前端”網校創始人。先後從事過 Java EE 、Android開發架構、iOS開發、小程序開發、產品設計、項目管理學等領域的工作，並在大量的實踐中積累了豐富的經驗，也形成了一套完整的移動因特網開發解決方案，在各大技術社區分享了共1000多篇技術文章，並發布了“Flutter從簡到詳”系列視頻教程。

目錄
基礎篇
第1章Flutter與Dart語言
1.1Dart語言概述
1.2Flutter概述
1.3Flutter的編譯模式
1.4Dart與Flutter的語法基礎概述
1.4.1Dart語言的基本數據類型
1.4.2Dart語言的變量
1.4.3Dart語言的方法
1.4.4Dart語言的Map、List、Set
1.4.5Dart語言的流程控制
1.4.6Dart語言的異步編程
1.5Android Studio的調試技巧
1.5.1斷點調試
1.5.2Flutter Inspector視圖定位工具
1.5.3Flutter Performance內存管理工具
1.5.4Flutter 常用命令

第2章MaterialApp組件的精通使用分析
2.1MaterialApp組件精通使用的簡單描述
2.2MaterialApp基本使用
2.3MaterialApp組件的路由routes配置概述
2.4路由routes配置
2.5路由配置404
2.6路由觀察者
2.6.1基本使用
2.6.2route 解析
2.6.3NavigatorObservers實戰
2.6.4動態路由實戰
2.6.5自定義動態路由實戰
2.6.6自定義圓形過渡效果路由
2.6.7特殊情況動態路由實戰
2.6.8關閉當前頁面
2.7樣式ThemeData精講
2.7.1brightness 屬性分析
2.7.2primarySwatch屬性分析
2.7.3primaryColor屬性分析
2.7.4accentColor屬性分析
2.7.5與觸覺顯示相關屬性分析
2.7.6其他主題概述
2.8多主題適配
2.8.1一行代碼將App渲染成灰色
2.8.2淺談Provider進行狀態管理
2.8.3Provider進行多數據模型狀態管理
2.9多語言環境配置
2.9.1配置日期組件顯示中文
2.9.2配置應用不適配的系統語言默認為英文
2.9.3保存用戶對應用程序語言環境的偏好設置
2.9.4應用內切換語言環境然後動態更新當前語言環境
2.9.5應用內顯示文字適配多語言環境
2.10StatefulWidget、Context、State
2.11語義設計Semantics
2.12Widget的分析

第3章Scaffold組件的詳細綜述
3.1Scaffold的基本使用
3.2FloatingActionButton的詳細配置
3.2.1FloatingActionButton的類型
3.2.2FloatingActionButton的常用屬性使用分析
3.2.3FloatingActionButton的shape屬性分析
3.3Drawer配置側拉頁面
3.3.1用戶信息組件UserAccountsDrawerHeader
3.3.2DrawerHeader
3.3.3單擊按鈕打開與關閉側拉頁面
3.4BottomNavigationBar配置底部導航欄菜單
3.4.1items屬性分析
3.4.2type屬性分析
3.4.3bottomNavigationBar結合獨立的StatefulWidget使用
3.4.4bottomNavigationBar頁面保活解決方案
3.5BottomAppBar配置底部導航欄菜單
3.6底部標簽欄bottomSheet

第4章AppBar組件的詳細綜述
4.1AppBar的基本使用
4.1.1title屬性分析
4.1.2線性佈局Row在屬性title中的使用
4.1.3Row標簽結合PageView實現滑動切換
4.1.4Row標簽結合TabBarView實現滑動切換
4.1.5MediaQuery解析
4.2TabBar結合TabBarVie
4.3AppBar的bottom屬性
4.4AppBar的leading屬性
4.5AppBar的actions屬性
4.5.1Icon的樣式配置
4.5.2AppBar的iconTheme與actionsIconTheme
4.6AppBar的flexibleSpace屬性
4.7SliverAppBar使用分析
4.8FlexibleSpaceBar使用分析
4.9SliverAppBar經典佈局效果
4.10AppBar、SliverAppBar對比
4.11AppBar的shape屬性分析

第5章文本顯示Text組件
5.1文本顯示組件的基本使用
5.2樣式組件TextStyle的使用分析
5.2.1樣式組件TextStyle的inherit
5.2.2樣式組件TextStyle的顏色配置
5.2.3文字大小fontSize
5.2.4文字粗細設置fontWeight
5.2.5文字斜體設置
5.2.6文字間距設置
5.2.7文字基線textBaseline分析
5.2.8裝飾decoration分析
5.2.9自定義字體fontFamily配置
5.2.10字體列表fontFamilyFallback配置
5.2.11字體陰影shadows配置
5.2.12文本高度height配置
5.3Text中文字對齊方式
5.3.1文字過長顯示省略號
5.3.2文字自動換行設置
5.3.3彈性佈局綜述
5.4富文本RichText組件的使用分析
5.5富文本RichText使用案例
5.6文本標簽
5.6.1文本標簽構建
5.6.2文本標簽結合流式佈局使用
5.7AnimatedDefaultTextStyle的使用分析

第6章文本輸入框TextField組件
6.1TextField組件的基本使用
6.1.1輸入的文字不可見
6.1.2設置輸入的英文首字母大寫
6.1.3設置彈出的鍵盤類型
6.1.4鍵盤回車鍵的樣式與功能
6.1.5鍵盤回車鍵切換輸入框
6.1.6FocusNode輸入框焦點事件的捕捉與監聽
6.1.7TextField 輸入文本對齊配置
6.2TextField組件的設置及允許輸入的文本格式
6.2.1輸入字數限制
6.2.2輸入行數限制
6.2.3只允許輸入數字
6.2.4只允許輸入英文字母A~Z的大小寫
6.2.5自定義TextInputFormatter
6.3TextField組件InputDecoration
6.3.1TextField組件去掉默認的下畫線
6.3.2TextField邊框裝飾OutlineInputBorder
6.3.3TextField邊框裝飾線的顏色配置
6.3.4TextField不可編輯
6.4TextField組件配置提示文本
6.4.1TextField的labelText使用
6.4.2TextField的preIcon使用
6.4.3TextField的countText使用
6.4.4TextField的helperText與errorText
6.5TextField組件控制器TextEditingController
6.6TextField組件光標樣式配置
6.7一個搜索框
6.7.1搜索框SearchStaticBar組件構建
6.7.2搜索輸入框SearchTextFieldBar組件構建
6.7.3搜索輸入框使用案例

第7章Container組件
7.1Container組件的基本使用
7.1.1Container的大小限定分析
7.1.2Container自適應包裹子Widget
7.2Container組件的內外邊距
7.2.1EdgeInsets分析
7.2.2Padding分析
7.2.3Container在ListView中對子item自適應包裹
7.3Container組件decoration應用
7.3.1BoxDecoration在Container中的應用分析
7.3.2BoxDecoration在Container中的配置陰影
7.3.3BoxDecoration在Container中的配置漸變過渡樣式
7.3.4BoxDecoration配置背景圖像
7.3.5BoxDecoration的shape屬性配置使用
7.3.6ShapeDecoration在Container中的使用分析
7.4自定義ShapeBorder
7.4.1打洞效果
7.4.2手撕優惠券的效果
7.5AnimatedContainer的基本使用
7.6ConstrainedBox組件的使用分析

第8章按鈕組件
8.1MaterialButton的使用分析
8.1.1ButtonThemeData的使用分析
8.1.2各種Color的使用分析
8.1.3MaterialButton的回調函數說明
8.1.4MaterialButton的shape使用分析
8.1.5MaterialButton的寬和高分析
8.1.6MaterialButton的子Widget分析
8.1.7MaterialButton的內邊距分析
8.1.8RaisedButton的使用分析
8.1.9FlatButton的使用分析
8.1.10OutlineButton的使用分析
8.2FloatingActionButton
8.2.1屬性mini分析
8.2.2屬性shape分析
8.2.3標簽樣式
8.2.4與Scaffold的底部bottomNavigationBar綜合使用
8.2.5兩個頁面的過渡動畫
8.2.6懸浮按鈕的旋轉變換
8.2.7懸浮按鈕實現向上彈出的菜單效果
8.2.8帶有加載進度的ProgressButton按鈕使用
8.3IconButton系列
8.3.1PopupMenuButton按鈕的使用
8.3.2實現類似微信首頁右上角的小彈框
8.4自定義動畫效果按鈕AnimatedButton
8.5自定義進度交互的動畫按鈕
8.5.1實現背景填充效果的按鈕
8.5.2AnimatedStatusButton的自定義分析

第9章UI佈局
9.1線性佈局Column
9.1.1Column中子Widget的對齊方式分析
9.1.2Column中子Widget按比例分佈
9.1.3Column的寬與高自適應
9.2線性佈局Row
9.2.1Row中子Widget的對齊方式分析
9.2.2Row中子Widget按比例分佈
9.3彈性佈局Flex
9.4流式佈局Wrap
9.5基於Wrap實現的tag標簽使用
9.6流式佈局Flow
9.6.1初探FlowDelegate
9.6.2圓形動態彈出菜單
9.6.3類似開源中國的圓形動態菜單

9.6.4向上彈出的動態菜單
9.7層疊佈局Stack
9.7.1Positioned分析
9.7.2Stack中使用Align

第10章圖片Image組件
10.1加載資源圖片
10.2加載不同分辨率資源圖片
10.3Android與iOS中屏幕分辨率簡析
10.3.1分辨率
10.3.2屏幕尺寸
10.3.3屏幕密度
10.3.4Android中的屏幕像素密度(dip與dp)
10.3.5dip與ppi的區別
10.3.6rpx
10.3.7vw、vh
10.3.8Android中的圖片加載
10.3.9iOS中的圖片加載
10.3.10Flutter程序最終加載圖片
10.3.11Flutter中獲取屏幕相關信息
10.3.12asset靜態方法參數分析使用
10.4通過Image組件加載圖片
10.4.1通過FileImage加載手機存儲目錄下的圖片
10.4.2Android與iOS平臺下的存儲目錄分析
10.4.3獲取手機的存儲目錄空間路徑
10.4.4清除數據和清除緩存的區別
10.5通過FadeInImage組件加載圖片
10.6通過DecorationImage組件加載圖片
10.7Image.network的使用
10.8加載圓角圖片
10.9RawImage的使用分析
10.10高斯模糊效果
10.11將Widget保存為圖片
10.12圖片添加水印
10.13縮放圖片、拖動圖片
10.14為圖片添加水波紋單擊事件

第11章復選框CheckBox組件
11.1復選框CheckBox的基本使用
11.2CheckboxListTitle的基本使用
11.3實現圓形的復選框
11.4一個註冊頁面
11.4.1在頁面initState之前的準備
11.4.2在build函數中的構建

第12章單選框Radio組件
12.1單選框Radio的基本使用
12.2單選框Radio屬性使用分析
12.3RadioListTitle組件的使用分析
12.4一個優惠券選擇彈框
12.4.1優惠券數據的模擬
12.4.2底部彈框的顯示
12.4.3優惠券彈框UI構建