從頭至尾擼一遍Flutter的一切...

Flutter學(cai)習(keng)之路(Exploring Flutter in action)

---

創世宣言

• 盡情踩坑吧 ⤵️

主要Cover到的點

• 路由界面
• 狀態傳遞
  • 子Widget樹獲取父級StatefulWidget的State對象
• 基礎控件
  • 隨機字符串
  • 文本控件，字體樣式(Text/TextStyle/Text.rich/TextSpan)
  • 按鈕系列(RaisedButton/FlatButton/OutlineButton/IconButton/FlatButton.icon/shape)
  • 圖片系列(ImageProvider/Image/Image.asset/Image.network)
  • 單選開關和複選框Switch/Checkbox
  • 輸入框和表單(TextField/Form/TextFormField/FormState)
  • 登陸表單(TextField/Form/TextFormField/FormState)
  • 各類樣式的進度條(LinearProgressIndicator/CircularProgressIndicator)
• 佈局控件
  • 線性佈局(Row/Column)
  • 彈性佈局(Flex/Expanded/Spacer)
  • 流式佈局(Wrap/Flow)
  • 層疊佈局(Stack/Positioned)
  • 對齊與相對定位(Align/Alignment/FractionalOffset/Center)
• 容器控件
  • 填充(Padding/EdgeInsets)
  • 尺寸限制(ConstrainedBox/BoxConstraints/SizedBox/UnconstrainedBox)
  • 裝飾(DecoratedBox)
  • 變換(Transform/Matrix4(做用於繪製階段)/RotatedBox(做用於佈局階段))
  • 容器(Container(多種裝飾和填充等組件的組合)/Padding/Margin)
  • 裁減(Clip/CustomClipper(裁減動做的做用時期與Transform相同，都做用於繪製階段))
  • 通用類導航主界面(Scaffold/AppBar/TabBar/TabBarView/Drawer/FloatingActionButton)
• 列表控件
  • 單child滾動控件(SingleChildScrollView/Scrollbar)
  • 有限列表項狀況下使用ListView(ListView)
  • 衆多列表項狀況下使用ListView(ListView.builder)
  • 帶分割線的列表項狀況下使用ListView(ListView.separated)
  • 下拉刷新 和 上拉加載更多(初始化加載數據、結束時的標記、根據index判斷底部是繪製結束的Widget仍是正在加載時的Widget、Widget的正常顯示)
  • 有限GridView(GridView + SliverGridDelegateWithFixedCrossAxisCount)
  • 有限GridView.count(效果徹底等價於GridView + SliverGridDelegateWithFixedCrossAxisCount)
  • 有限GridView(GridView + SliverGridDelegateWithMaxCrossAxisExtent)
  • 有限GridView.extent(效果徹底等價於GridView + SliverGridDelegateWithMaxCrossAxisExtent)
  • 無限GridView加載(GridView.builder)
  • 滾動監聽(ScrollController/ScrollPosition)
• 觸摸反饋
  • 事件處理
    • 原始指針(觸摸事件)(擼一個觸摸板)(Listener)
  • 事件冒泡
    • 不一樣事件冒泡行爲之比較(HitTestBehavior.deferToChild/HitTestBehavior.opaque/HitTestBehavior.translucent/IgnorePointer)
  • 手勢識別
    • 點擊/雙擊/長按/拖動/滑動(GestureDetector)
    • 縮放(GestureDetector)
    • GestureRecognizer(當所修飾的對象不爲widget且具備recognizer節點時可用)
• 事件總線
  • 簡易EventBus(Dart實現)
  • EventBus界面演示
• 通知
  • 通知事件名稱(NotificationListener.onNotification)
  • 自定義通知(覆寫Notification + NotificationListener)
  • 通知冒泡(onNotification回調中的return value)
• 存儲路徑訪問和文件操做
  • 存儲路徑訪問(訪問緩存/訪問包路徑/訪問SD卡)(PathProvider)
• 網絡編程
  • HttpClient
  • Dio(本質是基於HttpClient封裝的上層API)
    • 更多Dio版本信息及API(官方地址)
• 功能控件及數據狀態管理(InheritedWidget)
  • 導航返回鍵和實體返回鍵攔截(再按一次確認退出)(WillPopScope)
  • 控件跨級傳遞數據(InheritedWidget/dependOnInheritedWidgetOfExactType/getElementForInheritedWidgetOfExactType/updateShouldNotify/didChangeDependencies)
  • 跨控件狀態管理(手動實現Provider)
    • 第三方Provider實現
  • 異步更新UI(FutureBuilder/StreamBuilder)
• 應用主題切換(Theme/ThemeData(內部經過InheritedWidget實現))
  • 單個界面主題切換
  • 全局界面主題切換
• 與原生互調和相互集成(MethodChannel.invokeMethod)
  • Flutter調用Android Native方法
  • Flutter界面跳轉至Android Native界面
• WebView Flutter(webview_flutter)
• 開發者通用設置(MaterialApp)
  • 是否顯示界面佈局網格(debugShowMaterialGrid)
  • 是否打開性能監控，覆蓋在屏幕最上面(showPerformanceOverlay)
  • 是否打開柵格緩存圖像的檢查板(checkerboardRasterCacheImages)
  • 是否打開顯示到屏幕外位圖的圖層的檢查面板(checkerboardOffscreenLayers)
  • 是否打開覆蓋圖，顯示框架報告的可訪問性信息，顯示邊框(showSemanticsDebugger)
  • 是否顯示右上角的Debug標籤(debugShowCheckedModeBanner)
• 切換操做系統平臺(Android/iOS)
  • 切換爲Android應用: debugDefaultTargetPlatformOverride = TargetPlatform.android
  • 切換爲iOS應用: debugDefaultTargetPlatformOverride = TargetPlatform.iOS
• 動畫
• 自定義控件
• 國際化

---

正片(Action)

• 內含大量gif圖，loading可能會比較耗時，依自身網速而定

---

整套效果的App下載連接

for Android

OS平臺應用包	QRCode
Android APK包下載(內測密碼:123456)

---

Github項目地址