flutter 完全使用GetX 主題切換 以及 自創(chuàng)建Widget的顏色隨主題變化方案

這篇將會解決手動切換主題以及跟隨手機切換主題來更新UI(包括自己創(chuàng)建的Widget)

創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設、網(wǎng)絡營銷策劃、小程序設計、電子商務建設、網(wǎng)絡推廣、移動互聯(lián)開發(fā)、研究、服務為一體的技術(shù)型公司。公司成立十余年以來，已經(jīng)為數(shù)千家成都電動窗簾各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務?，F(xiàn)在，服務的數(shù)千家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

主題切換有個問題，就是如果是我們自定義或者在 build() 自己創(chuàng)建的部件是不會隨著系統(tǒng)的主題切換而發(fā)生主題色變化的(實際測試中，如果頁面在頂層(沒有被push)切換主題并不會觸發(fā) build() 方法,(push之后的頁面切換系統(tǒng)主題是可以觸發(fā) build() 的,而且會頻繁觸發(fā)好多次...)，既然無法通過重新 build 更新組件的主題色，那么我們在切換主題后，強制觸發(fā)整個app的 build() 就可以了)

Flutter 切換指定版本

查看所有分支和當前分支

切換 到指定分支。 例如

查看所有版本

切換 到指定版本。 例如

更新到最新版本

cd到自己的flutter目錄下

執(zhí)行。git reset --hard id

這是1.20.4的id

git reset --hard fba99f6cf9a14512e461e3122c8ddfaa25394e89

這是2.5.1的id

git reset --hard ffb2ecea5223acdd139a5039be2f9c796962833d

這是1.22.4的id

git reset --hard 1aafb3a8b9b0c36241c5f5b34ee914770f015818

這是1.22.3的id

git reset --hard 8874f21e79d7ec66d0457c7ab338348e31b17f1d

flutter git地址

找commit id 的手順

Flutter（二）StatefulWidget基礎(chǔ)組件

MaterialApp 是我們app開發(fā)中常用的符合MaterialApp Design設計理念的入口Widget。MaterialApp這個組件里面的參數(shù)比較多，而且一般在應用入口會用到，所以這里把它內(nèi)部的所有參數(shù)都列出來了

基本用法：

可以看到我們在 App 的最外層直接使用了 MaterialApp ，可以指定App的名稱（ title ），App的主題樣式（ theme ），首頁的組件（ home ），路由跳轉(zhuǎn)配置）（ routes ），關(guān)于路由跳轉(zhuǎn)我們在后面的章節(jié)中會介紹

Scaffold 實現(xiàn)了基本的 Material Design 布局結(jié)構(gòu)， Scaffold 在英文中的解釋為角手架，我們可以理解為樓體中的鋼架結(jié)構(gòu)，通過它可以構(gòu)建一個頁面

在Flutter應用開發(fā)中，我們可以將 Scaffold 理解為一個布局的容器?？梢栽谶@個容器中繪制我們的用戶界面

下面是 MaterialApp + Scaffold 的組合的基本用法

AppBar 就是頂部的導航欄組件，支持自定義標題，左右兩側(cè)的工具欄按鈕等

BottomNavigationBar 是底部的菜單欄組件

使用方法：

一般我們會定義一個全局變量如 _currentIndex 用于記錄當前選中的下標。然后在 onTap 屬性的回調(diào)方法中調(diào)用

setState(() { _currentIndex = index;}); 更新 _currentIndex 就可以實現(xiàn)底部菜單的切換。 BottomNavigationBar 一般會配合 BottomNavigationBarItem 一起使用（如下所示）

RefreshIndicator 是Flutter中的下拉刷新組件，一般配合 ListView 組件一起使用

Image 就類似于android中的 ImageView ，可以自定義圖片顯示的寬高

從網(wǎng)絡中加載圖片

從本地（File文件）加載圖片

從本地資源加載圖片

可以將byte數(shù)組加載成圖片

TextField 就類似于android的 EditText

PageView 就類似于android中的 ViewPager

Flutter 四種工程類型及Flutter項目類型切換

標準的Flutter App工程，包含標準的Dart層與Native平臺層

Flutter平臺插件工程，包含Dart層與Native平臺層的實現(xiàn)

Flutter純Dart插件工程，僅包含Dart層的實現(xiàn)，往往定義一些公共Widget

參考資料: