Flutter初探--常用依賴包

國外地址：

新疆網(wǎng)站建設公司成都創(chuàng)新互聯(lián)公司,新疆網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為新疆1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的新疆做網(wǎng)站的公司定做！

國內(nèi)鏡像：

以 flutter_screenutil 為例

路由框架 annotation_route

狀態(tài)管理 provider

UI適配 flutter_screenutil

刷新控件 flutter_easyrefresh

網(wǎng)絡請求 dio

toast控件 fluttertoast

圖表庫 charts_flutter

網(wǎng)絡監(jiān)聽 connectivity

事件總線 event_bus

日歷組件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

該篇文章為常用依賴包總結(jié)，用來記錄所需要的常用依賴包，后續(xù)會不斷擴充內(nèi)容~

Flutter中屏幕適配，尺寸設置

1、 新版本Flutter SDK 引入了 extension的機制?？梢詫δ硞€class 進行擴展。（swift中有類似機制）

2、屏幕適配一直是一個老生常談的問題，隨著機型越來越多，適配的場景也越來越復雜。

3、之前有了解過 微信小程序的適配方案，個人一直感覺是一個比較好的方式（ iPhone6為標準尺寸）下面????將引用小程序的方案來進行對 Flutter的尺寸設置。

size_fit.dart 文件

double_extension.dart 文件

int_extension.dart 文件

通過上面的設置，在不同設備上，展示的widget的尺寸就會不一樣了。

Flutter_圖片分辨率適配及批量拓展使用

flutter開發(fā)中，圖片的引用是必不可少的，所以為了提高效率和精準度，我們需要對不同分辨率的手機使用相對應的切圖圖片，本章介紹如何進行 圖片分辨率適配 和 圖片批量拓展處理 。

flutter中會首先根據(jù)系統(tǒng)的devicePixelRatio（每一個邏輯像素包含多少個原始像素，可以通過MediaQueryData.devicePixelRatio來得到）來找對應倍數(shù)的文件夾下的圖片，如果沒有對應倍數(shù)，找最接近的。

所以在flutter項目中，我們需要構(gòu)建對應的倍數(shù)像素文件夾

之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，會自動適配該像素下最接近的jay圖片）。

使用flutter-img-sync插件批量化處理，具體操作如下

目前還不能處理gif、webp等格式的圖片，而且如果和上邊介紹的不同像素比適配方案一起使用的話，由于進行了精準定位，所以指定圖片后就不能進行像素適配，這是目前還存在的較大問題，所以目前兩者方案只能暫時取一使用。

Flutter實踐--屏幕適配

做移動端開發(fā)的小伙伴都知道，針對不同型號和尺寸的手機要進行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進行適配呢？以下為近期flutter開發(fā)過程中關于適配的一些學習和記錄~~~~

說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點????

默認寬1080px

默認高1920px

allowFontScaling為false，即不跟隨系統(tǒng)字體大小設置變化

初始化單位為px

需要把context傳進去，因為內(nèi)部是通過 MediaQuery 來獲取屏幕尺寸等相關信息的

無需再傳context，因為內(nèi)部是通過單例 window 來獲取屏幕尺寸等相關信息的

作為iOS開發(fā)，之前都是以pt為參照進行比例適配的，且架構(gòu)組已經(jīng)定義了一套適配相關常量，傳px進去不太方便，所以需要對flutter_screenutil進行擴展

公司設計圖是以iPhone X的尺寸提供的即物理設備尺寸為375x812，像素比例為750x1624,像素密度比為2

初始化仍用px來初始化

dart sdk 2.7正式支持 extension-method ，即為已有類擴展方法，從 flutter_screenutil 這種 540.w 寫法點進去，我們可以看到

flutter_screenutil為num類擴展了一系列簡寫方法，那我們當然可以按照它這種方式進行擴展

網(wǎng)上提供的解決方案：

第一步：修改 pubspec.yaml

第二步：執(zhí)行 flutter pub get

第三步：重啟 AndroidStudio

解決方案：去掉const即可

UI設計中px、pt、ppi、dpi、dp、sp之間的關系

Dart/Flutter - 擴展方法(ExtensionMethod)