Flutter 升級 2.0 填坑指導捌朴,帶你原地起飛

Flutter 2.0 的發(fā)布帶來了很多的 break change 吴攒,特別是新增加的空聲明安全,相信不少大哥嘗鮮之后立馬反思自己“手賤” 砂蔽,事實上舊項目升級 Flutter 2.0 確實有很多兼容的點洼怔,但是“吃螃蟹”其實我們可以逐步拆解,比如“先蒸熟了再吃”左驾?

image

其實正如《 Dart 2.12 發(fā)布镣隶,穩(wěn)定空安全聲明和FFI版本》 里所說,升級到 Flutter 2.0 并不會強制要求你馬上使用空聲明安全 诡右,所以我們可以把整個升級適配過程拆解幾步來完成安岂,最終完成 2.0 的升級適配。

1帆吻、針對 API 的調(diào)整

首先你需要先將本地的 Flutter SDK 升級到 2.0 以上的版本域那,升級完成之后首先確保 Dart SDK 的 environment 小于 2.12.0 , 可以選中 2.10.0 之類的版本猜煮,如下所示的配置是不需要針對空聲明安全進行適配琉雳,接下來我們就可以針對 SDK API 的 break change 先進行適配調(diào)整样眠。


environment:
  sdk: '>=2.10.0 <3.0.0'

首先你會應該遇到最多的應該是 List 對象的修改,因為 factory List 的函數(shù)已經(jīng)被 Deprecated 翠肘,所以你需要使用 [] 或者 List.filled 來替換你原有的實現(xiàn)檐束,從這開始就是“體力活”了。

image
image.png

常見的還有 runZonedonError 參數(shù)也被 Deprecated 束倍,需要使用 runZonedGuarded 來替代被丧。

一般使用 runZoned 的都是用于對 Dart 層做錯誤信息收集。

image

Stack 控件的 overflow 參數(shù)也被 Deprecated 绪妹,需要替換為 clipBehavior甥桂,比如以前的 Overflow.visible 可以修改為 Clip.none ,默認情況下是 Clip.hardEdge邮旷。

image.png

FlatButton 也被標志為棄用黄选,需要替換成 TextButton;類似的 RaisedButton 需要替換為 ElevatedButton 婶肩。

這里主要需要注意的是: FlatButtonRaisedButton 上的 padding办陷、color 等方法現(xiàn)在需要使用 ButtonStyle 來設置。

image.png

類似的還有 Scaffold.of(builderContext).showSnackBar 方法需要替換為 ScaffoldMessenger.of(builderContext).showSnackBar 使用律歼。

image.png

最后還有:

  • ScaffoldresizeToAvoidBottomPadding 參數(shù)正式取消民镜,需要使用 resizeToAvoidBottomInset 參數(shù)替代。

  • Theme.of(context, shadowThemeOnly: true)shadowThemeOnly 參數(shù)正式取消险毁。

  • 官方新增了 DateUtils'package:flutter/material.dart' 里制圈,可能會與你的項目里的 DateUtils 命名沖突。

  • Localizations.localeOf(context, nullOk: true)MediaQuery.of(context, nullOk: true)nullOk 參數(shù)正式取消畔况。

大致上我遇到的 break change 或者棄用警告就是上面這些鲸鹦,調(diào)整完后在沒有打開空安全配置的情況下,是可以正常運行的跷跪。

當然你也可能遇到:修改完后依舊無法運行的情況馋嗜,因為還有第三方插件包依賴需要調(diào)整。

2域庇、針對依賴倉庫的調(diào)整

雖然 Flutter 2.0 沒有要求主項目一定使用空聲明安全嵌戈,但是對于插件的適配要求卻比價嚴格覆积,所以你仍可能需要升級一些 pub 倉庫的依賴來完成適配听皿。

前提是祈禱你使用插件包有適配 null-safety

如圖所示宽档,正常支持 null-safety 的包在 pub 官網(wǎng)上是有 Null safety 的標簽或者 nullsafety 的預覽版本尉姨,這時候只要修改你的依賴版本,使用支持空聲明安全的插件版本就可以了吗冤。

image.png

完了嗎又厉?明顯沒有九府!

因為大量的插件升級就可能帶來版本沖突,比如 analyzer 版本沖突覆致,在 json_serializablebuilt_value_generator 中他們分別依賴了不同的 analyzer 版本侄旬,所以會有版本沖突問題。

image.png

另外比如 build_runnergraphql 的版本之間存在 web_socket_channel 的沖突煌妈。

image.png

這些沖突要怎么解決呢儡羔?這里給大家展示使用 dependency_overrides 臨時解決這些沖突。

如下圖所示璧诵,可以看到在 dependency_overrides 下我強行使用了 analyzer: 1.1.0web_socket_channel 汰蜘,這樣運行之后 analyzerweb_socket_channel 的版本會被強制指定,從而忽略沖突來解決無法運行的問題之宿。

另外在我的 dependency_overrides 里可以看到很多帶有 # 的注解版本族操,這些版本都是在遇到?jīng)_突之后,為了成功運行一個個添加上去比被,之后在對應插件更新支持兼容后才注釋掉色难。

image.png
image.png

添加了 dependency_overrides 之后運行會有 Warning 提示,這部分忽略就行了姐赡。

image.png

3莱预、針對空聲明安全的調(diào)整

在完成上面兩個步驟,項目應該就可以在 Flutter 2.0 上運行项滑,那接下來就是把版本升級到空安全聲明的支持依沮,當然前提是你想要使用 null safety

升級到空安全聲明枪狂,推薦使用官方的 dart migrate 命令危喉,命令會生成一個可視化的界面,引導你將項目遷移到空安全聲明州疾,并且自動幫你覆蓋代碼辜限。

如果你還有插件沒有完全支持空安全聲明,那么可以使用 dart migrate --skip-import-check 來完成遷移严蓖。

image.png

運行后可以看到一個鏈接薄嫡,點擊如圖所示鏈接就可以打開引導界面,引導界面上可以看到每個文件會被修改位置和數(shù)量颗胡,你可以自己重新調(diào)整內(nèi)容后點擊刷新毫深,或者直接點擊 APPLY MIGRATION 按鍵,之后再到項目里進行修改毒姨。

image.png

相信我哑蔫,修改后肯定會有一堆報錯和警告,不要擔心,這是正常的闸迷,接下來就是“體力活”了嵌纲。

首先某些地方可能會被修改為如下圖所示代碼,你只需要對應修改回來就好腥沽,自動覆蓋的腳本確實有些傻逮走。

image.png

有時候某些 await 語法會被強行增加 as FutureOr ,如果你不需要改為原來的聲明就可以今阳。

image.png

還有比如 compute 方法中的 Function(_) 錯誤提示言沐,只需要改為對應分參數(shù)傳入,比如 Function(String? data) 就可以了酣栈。

image.png

有時候一些方法定義也會被強行修改险胰,比如 redux 相關(guān)的這些修改可能也會影響運行問題,所以只需要把 as 部分去除就可以了矿筝。

image.png

而比如這類方法報錯起便,一般就是提供的參數(shù)和使用參數(shù)對應不上,只需要添加上 ? 即可修復窖维。

image.png

最后有時也會使用 ! 來暫時完成適配榆综,比如某個參數(shù)你確定不會為 null,你可以在使用時通過 ! 表示強行使用(就是任性不判空)铸史,比如下圖就是對 _dragOffsetnotification.scrollDelta 的強行修改對比鼻疮。

image.png

可以看到這部分內(nèi)容也是純粹體力活,雖然自動覆蓋的靠譜程度肯定不高琳轿,還是需要一定的人工修改判沟,但是這個自動化過程大大提高了遷移的效率,而在代碼覆蓋之后崭篡,environmentsdk 也會自動修改為 >=2.12.0 挪哄。

空安全聲明遷移完成!

4琉闪、針對遷移中運行的調(diào)整

最后迹炼,到這里你可能會發(fā)現(xiàn),升級到 dart 1.12之后颠毙,適配完 null safety 點 IDE 上的運行發(fā)現(xiàn)還是運行不起來斯入,比如下圖所示:

image.png

這是因為你還有沒有遷移完成的依賴包,但是有時候依賴包不是一時半會就能兼容完成蛀蜜,這時候應該如何適配運行呢刻两?

這時候就可以通過 flutter run --no-sound-null-safety 命令來運行調(diào)試項目,通過此命令運行的項目并不會使用空安全聲明校驗涵防,然后通過輸入 r 或者 R 等就可以完成 hotload 等調(diào)試操作闹伪。

image

如果需要 debug 代碼或者性能調(diào)試,還可以通過 chrome 瀏覽器打開 http://localhost:9100 地址壮池,然后把運行得到的 Observatory 地址如: http://127.0.0.1:62145/H1PrDXLbA3w=/ 輸入到 Connect 輸入框偏瓤,這樣就可以打開 DartTools 進行調(diào)試。

image.png

最后不得不說椰憋, Flutter 2.0 算是 Flutter 新的起點厅克,希望新的版本能給你們帶來更穩(wěn)定和更便捷的開發(fā)體驗。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末橙依,一起剝皮案震驚了整個濱河市证舟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌窗骑,老刑警劉巖女责,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異创译,居然都是意外死亡抵知,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門软族,熙熙樓的掌柜王于貴愁眉苦臉地迎上來刷喜,“玉大人,你說我怎么就攤上這事立砸∫创” “怎么了?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵颗祝,是天一觀的道長浊闪。 經(jīng)常有香客問我,道長螺戳,這世上最難降的妖魔是什么规揪? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮温峭,結(jié)果婚禮上猛铅,老公的妹妹穿的比我還像新娘。我一直安慰自己凤藏,他們只是感情好奸忽,可當我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揖庄,像睡著了一般栗菜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蹄梢,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天疙筹,我揣著相機與錄音,去河邊找鬼。 笑死而咆,一個胖子當著我的面吹牛霍比,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播暴备,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼悠瞬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了涯捻?” 一聲冷哼從身側(cè)響起浅妆,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎障癌,沒想到半個月后凌外,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡涛浙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年趴乡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蝗拿。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡晾捏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出哀托,到底是詐尸還是另有隱情惦辛,我是刑警寧澤,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布仓手,位于F島的核電站胖齐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏嗽冒。R本人自食惡果不足惜呀伙,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望添坊。 院中可真熱鬧剿另,春花似錦、人聲如沸贬蛙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阳准。三九已至氛堕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間野蝇,已是汗流浹背讼稚。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工括儒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人锐想。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓帮寻,卻偏偏與公主長得像,于是被迫代替她去往敵國和親痛倚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容