13518219792
做移動端開發的小伙伴都知道，針對不同型號和尺寸的手機要進行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進行適配呢？以下為近期flutter開發過程中關于適配的一些學習和記錄~~~~
為淮安區等地區用戶提供了全套網頁設計制作服務，及淮安區網站建設行業解決方案。主營業務為網站設計制作、成都網站設計、淮安區網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點????
默認寬1080px
默認高1920px
allowFontScaling為false，即不跟隨系統字體大小設置變化
初始化單位為px
需要把context傳進去，因為內部是通過 MediaQuery 來獲取屏幕尺寸等相關信息的
無需再傳context，因為內部是通過單例 window 來獲取屏幕尺寸等相關信息的
作為iOS開發，之前都是以pt為參照進行比例適配的，且架構組已經定義了一套適配相關常量，傳px進去不太方便，所以需要對flutter_screenutil進行擴展
公司設計圖是以iPhone X的尺寸提供的即物理設備尺寸為375x812，像素比例為750x1624,像素密度比為2
初始化仍用px來初始化
dart sdk 2.7正式支持 extension-method ，即為已有類擴展方法，從 flutter_screenutil 這種 540.w 寫法點進去，我們可以看到
flutter_screenutil為num類擴展了一系列簡寫方法，那我們當然可以按照它這種方式進行擴展
網上提供的解決方案：
第一步：修改 pubspec.yaml
第二步：執行 flutter pub get
第三步：重啟 AndroidStudio
解決方案：去掉const即可
UI設計中px、pt、ppi、dpi、dp、sp之間的關系
Dart/Flutter - 擴展方法(ExtensionMethod)
在用Flutter 開發windows和linux跨平臺應用的時候，如何設置默認窗口大小呢？
flutter沒有提供統一的api，所以默認的窗口大小是1280x720.
如果我們想要改成自己想要的默認窗口大小呢？比如我想要設置為：512像素寬, 926像素高
我該怎么做呢？
請看我的教程。
首先你確保你已經為項目創建了windows和Linux的支持。
目前Flutter 為windows和linux提供的是托管式運行的主程序，可以理解為一個殼子，這個殼子就是用cpp寫的，平臺原生的window 窗口。
所以我們可以打開相應的cpp源代碼，設置默認窗口大小。
這里先講windows和linux，因為mac 平臺跟windows和linux不一樣，后面單獨給大家講解。
我們看圖。
源代碼路徑位于：
windows/runner/main.cpp
找到
第一個參數是寬度，單位是px，第二個是高度，單位是px
修改后重新運行生效。
源代碼路徑位于：
linux/my_application.cc
找到
方法的第一個數字是寬度，第二個是高度，單位也是px像素。
修改后，重新運行生效。
現在，你已經學會了如何設置初始窗口大小了。
相對于iOS開發，Flutter的布局更具有靈活性，每個頁面設計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應該如何去布局，我覺得不現實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。
根據設計圖，可以看出整體可以分成兩部分，上面一部分是系統介紹模塊，下面一部分是真正的登錄內容，因為涉及到疊加，因此考慮用Stack；
系統介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。
第一行為Image，
第二行為Text，
第三行可以看成一個小Column，分兩塊進行布局
第四行可以看成一個小Column，分兩塊進行布局
第五行可以看作一個TextButton，
第六行可以看作一個Row，分三塊進行布局
通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現的話，就是復雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復的或者覺得可以封裝出來的部分，則進行下一步。
每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。
在做到第三第四行的時候，發現這兩個很相似，而且設計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現這種輸入操作，具體的實現筆者不再詳細的描述了。
經過這一步，整體的規劃設計圖已經有了，各個組件也都有了，接下來的工作就是組裝了。
具體布局設計到一些細節的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區域。
對文字顏色大小等，可以用TextStyle直接設置。
對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
細心的開發者會發現flutter構建的App體積比native的大一些，是什么原因造成App體積大呢？
其實flutter 在release時App體積和native的大小差不多，而debug時體積通常會大。debug版本體積較大是為了Hot reload和快速編譯。如果有flutter開發經驗的朋友都體驗過，如果您修改一下App的背景顏色，只需save一下就可以立刻看到修改后效果。我稱之為“像藝術家一樣在創造App”，因此為了實現這些目標，提高開發的效率，debug將占用全部資源。而當我們構建release版時，flutter又會采用AOT策略，提高App運行效率，release版只打包必需的資源，因而體積又會減少。
另外，flutter團隊也一直在尋找減小程序大小的方法。
1、 新版本Flutter SDK 引入了 extension的機制。可以對某個class 進行擴展。（swift中有類似機制）
2、屏幕適配一直是一個老生常談的問題，隨著機型越來越多，適配的場景也越來越復雜。
3、之前有了解過 微信小程序的適配方案，個人一直感覺是一個比較好的方式（ iPhone6為標準尺寸）下面????將引用小程序的方案來進行對 Flutter的尺寸設置。
size_fit.dart 文件
double_extension.dart 文件
int_extension.dart 文件
通過上面的設置，在不同設備上，展示的widget的尺寸就會不一樣了。
