做移動端開發(fā)的小伙伴都知道，針對不同型號和尺寸的手機要進行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進行適配呢？以下為近期flutter開發(fā)過程中關于適配的一些學習和記錄~~~~
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,通化企業(yè)網(wǎng)站建設,通化品牌網(wǎng)站建設,網(wǎng)站定制,通化網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,通化網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點????
默認寬1080px
默認高1920px
allowFontScaling為false，即不跟隨系統(tǒng)字體大小設置變化
初始化單位為px
需要把context傳進去，因為內部是通過 MediaQuery 來獲取屏幕尺寸等相關信息的
無需再傳context，因為內部是通過單例 window 來獲取屏幕尺寸等相關信息的
作為iOS開發(fā)，之前都是以pt為參照進行比例適配的，且架構組已經(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)
近來閑暇時間一直在做Flutter,閃屏頁是一個比較常見的需求,網(wǎng)上的閃屏頁教程大部分是那種類似于廣告頁,而非iOS中的 LaunchScreen 性質的閃屏頁.按照原來的方案我們要配置閃屏頁的話,我們需要同時配置兩端的閃屏頁,那么有沒有比較簡單的方案來配置閃屏頁呢? 毋庸置疑,當然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來我們就來看一下具體應該怎么使用這個插件.
首先把 flutter_native_splash 導入到工程的 pubspec.yaml 中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具體如下所示.
接下來我們就來配置 flutter_native_splash ,在配置之前我們看一下 flutter_native_splash 的可配置項.
例如,我現(xiàn)在只有一個logo圖片,那么我想生成iOS和android兩端的閃屏頁,這時候我只需在 pubspec.yaml 如下設置即可.
當然了,如果你有其他配置可以自行進行添加.
配置完成了,我們該如何生成呢?這時候需要我們打開終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認就是在當前工程目錄下.
然后我們需要執(zhí)行下面的三個命令來生成閃屏頁
每一次都敲三個命令實屬麻煩,我們把上訴的三個命令整合成一個命令,如下所示.
那么,我們不想使用該插件生成的閃屏頁該怎么辦呢?我們只需要執(zhí)行下面命令即可.
注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.
OK,上面就是關于 flutter_native_splash 的使用全部內容,其實比較簡單,如果需要定制化的,建議還是各自平臺配置各自的閃屏頁.如果有任何問題歡迎在評論區(qū)批評指導,感謝大家了.
調用SystemChrome.setEnabledSystemUIOverlays([]);
把狀態(tài)欄和虛擬按鍵隱藏掉，
跳轉到其他頁面后需要調用
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);把狀態(tài)欄顯示出來，
需要一起調用底部虛擬按鍵
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom])
注：亮度調節(jié)和音量調節(jié)gif無法體現(xiàn)，功能是ok的，其次默認Icon鎖的close和open實在難以分辨。
環(huán)境：Flutter 2.8.1 channel stable ;Dart 2.15.1
需要音頻播放器的看這里： Flutter音樂播放器
重點說下這個工具類，因為視頻播放，涉及到狀態(tài)改變有很多，筆者剛開始選擇使用 InheritedWidget 來在眾多的widget之間共享數(shù)據(jù)。但是總感覺這樣有點繁瑣，且不很優(yōu)雅！
這里非廣告，如果是使用 GetX 就很簡單了，筆者也使用了 GetX 進行封裝了，一瀉千里的趕腳！，但是筆者還是那句話：剛開始接觸Flutter的開發(fā)者不是很建議使用 GetX ，可以先熟悉下Flutter狀態(tài)管理的基礎原理再行使用。而且為了盡量簡潔，還是不引入其他的第三方了。
我們選擇對第三方插件進行封裝的目的不外乎這幾個：
于是筆者就寫了一個工具類 VideoPlayerUtils ，專門且只用來處理播放器的所有業(yè)務。包括暫停、播放、跳轉、調節(jié)音量、調節(jié)亮度、切換視頻等操作。在所有的widget中不會引用關于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 負責widget與播放器之間的所有操作交互。后續(xù)優(yōu)化迭代或更換播放器插件時，只需針對這個工具類進行修改，對所有widget不會有任何的影響，大大的解耦合了。
其中 VideoPlayerState ：
提供以上的公共屬性，可以通過 VideoPlayerUtils 來獲取對應的值，使用 get 只讀，使外界不會誤修改這些屬性，以保證數(shù)值的安全性。開發(fā)者可根據(jù)自身需要自行添加屬性。
提供以上方法來處理播放器的所有業(yè)務。同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
重點說下這個方法，是整個業(yè)務的核心方法，控制視頻的播放或暫停。開發(fā)者只要遇到播放或暫停是均可調用此方法，具體是播放或暫停，內部根據(jù)傳入的 url 自行判斷，開發(fā)者不需要關心。
切換新視頻也是使用此方法，傳入的 url 與上次不一致，自動切換新視頻。筆者可根據(jù) statusListener 來監(jiān)聽播放狀態(tài)的改變，以此處理自身邏輯。
這個也需要提下，視頻播放器在播放新視頻時會異步初始化，一般我們的操作是在 initState() 初始化，成功后再 setState() 。這里筆者遇到一個讓人蛋疼的問題：
我們看 video_player 的使用：
VideoPlayer(controller) ：widget中已經(jīng)持有了controller。本來筆者封裝的目的就是為了讓widget與controller的之間解耦合。但此時的筆者。。。。
放棄不是不可能放棄的，這輩子都不會放棄的！
于是筆者取了巧，寫了一個初始化監(jiān)聽器 initializedListener ，包換2個參數(shù)： bool,Widget ，初始化是否成功；其中widget為初始化成功返回需要展示的播放器UI，失敗默認返回 const SizedBox() 。
到這里就可以簡單使用了：
沒看錯，視頻播放就是這么簡單。
如果有更多的業(yè)務功能，筆者也按照自己的需求寫了一套，同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
VideoPlayerGestures 主要是處理手勢的，比如快進、快退等跳轉播放；左側上下滑動調節(jié)亮度；右側上下滑動調節(jié)音量；單擊是否開啟沉浸式播放，所有widget的隱藏與顯示；雙擊播放、暫停等。
哦，還有 PercentageWidget 也放到這個文件下了，就是這玩意：
因為顯示的百分比與手勢相關，隨著手勢移動而更新。開發(fā)者可自行處理。
筆者處出于簡單考慮，就按照整個UI的位置命名了。瞅一眼就知道是啥玩意。
同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
就是這玩意：
同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。話說這個鎖的 Icon 的open和close是真的難分辨！
就是這玩意：
同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
這玩意是自定義的，別問，問就是跟產(chǎn)品干一架落了下風
主要就是自定義這玩意：
同樣的開發(fā)者可根據(jù)自身需要自定義。
注：這里沒有添加緩沖的進度，開發(fā)可查看 video_player 中的源碼 VideoProgressIndicator ，按業(yè)務自行定義。
這玩意就是整合以上的widget，再考慮下全屏的安全區(qū)域，沒啥東西。開發(fā)者可自行處理！
具體的實現(xiàn)監(jiān)聽器的思路， 看這里 。
自此一個漂亮的Flutter視頻播放器就已經(jīng)結束了。如果您覺得對您有些許幫助的話，歡迎 Star ！
重慶分公司
重慶分公司
