最近幾個月來工作的職務上有些轉換,加入到一個小規模的app開發團隊,並且嘗試導入Flutter開發一套codebase就能夠佈署到多個平台的跨平台app。其實網路上已經有非常多介紹Flutter的文章,而原生與跨平台的解決方案比較也很多人討論過,所以這篇會以一個初入Flutter的新手,到成功交付產品上線後,一直到採用Flutter Web的心路歷程分享。
老闆問:能不能弄個跨平台app
其實跨平台一直都存在並且持續有新的技術出現,雖然Flutter還很年輕,但是在這幾年的熱度也快速的竄升。我認為採用跨平台技術對於單純開發給公司內部使用的系統來說,最大的優點就是在人力的節省。在一個開發了web就會被問能不能放在行動裝置上,作了手機app就會被問能不能web也有的環境下,為了提供多個平台管道給使用者,一支系統難道不能只開發一次就好了嗎(彷彿老闆的聲音飄出來了)。
要開發多個平台可以使用的應用程式,除了能夠支援不同裝置尺寸的web應用程式外,如果需求面上又希望能保留行動裝置功能的支援,那Flutter自然是一個適合的選擇。
Flutter官方網站直接的介紹是這樣寫的:
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Web Hit Stable Millestone
Android和iOS是Flutter最先開始穩定支援的平台,但終究web平台還是一個觸及度最高的管道,也許平板電腦不是每個人都有,但user們還是都用電腦上班。在專案達成mobile first的任務,接著要開始擴大觸及程度時,剛好迎來Flutter Engage在3月3號發佈了Flutter 2的更新。
Perhaps the single largest announcement in Flutter 2 is production-quality support for the web.
Flutter 2正式將Web支援放進stable channel,原本要打開Web支援還得使用beta channel才行,甚至官方也建議在web正式穩定支援前,要發佈成產品都需要仔細的確認執行起來是否有bug。當下還在觀望是否該導入Flutter Web才過沒多久,隨著Flutter 2的發佈後,馬上就在隔天拿起現有的Flutter專案進行POC,直到最近成功的將原本的app正式發佈給使用者使用。
從Flutter到Flutter Web
下面我分享三個如果今天從新手Flutter開發者,一路走到開發產品等級的Flutter Web可能會發生的心路歷程與重點學習資源:
- 從零開始開始的Flutter菜鳥
身為第一次接觸Flutter的開發者,自己覺得還不算難上手,基本上跟著官方的文件把開發環境裝起來後,接著讀完stateless和stateful widget還有column和row的layout概念後,就可以作出簡單的切版畫面。
Flutter的widget其實很多,常常都是需要的時候邊查邊實作,通常第一步會先找是不是有Flutter已經提供的widget(像是drawer、search、bottom navigation等),如果沒有的話這裡推薦pub.dev還有Flutter Gems,這兩個網站的資源可以幫你找到很多你需要的功能。最後再上http加上json serialization,或是直接跟著cookbook作大致上就能接完後端了。
- 一個好的狀態管理很重要
成功發佈完app的1.0.0版後,接著來的就是各種app的新功能需求,在追加越來越多的跳頁功能下,開始出現很多的渲染失敗或是改一改就出現畫面亂跳頁的bug。這時候才會發現真的需要一個好的狀態管理,領悟到沒有好好規畫狀態管理的app不止難以維護,更會造成app效能變差。如果這段是在趕鴨子上架的過程被忽略掉的,這時直接建議把Flutter狀態管理這篇讀完,至少用Provider好好設計每個widget的狀態變化與重新渲染的時機。
另外要注意在取後端資料時是否有使用FutureBuilder,FutureBuilder可以幫你確認取得async資料(通常是後端的一包資料)的各種狀態,例如在接到資料前可以先拋出一個自己準備有讀取效果的widget,並在取得資料後再使用這包資料渲染出要程現的widget(對Dashboard而言可能就是一些圖表)。
- 打開web支援要怎麼作
Flutter web在開發上其實也不困難,而且可以在VSCode用debug模式就可以直接進行開發,Web support for Flutter官方有一個篇章在作介紹,如果是專案一開始就有打算作Web平台,那建議直接跟著文件說明就能夠建立Flutter Web應用程式。
但如果今天是有一個已經開發好的app產品要打開Web平台的支援,通常就會遇到比較多的阻礙,當我以為一個彈指就能把web支援打開,但遇到的就是滿滿的error訊息。要將現有的app打開web支援,通常在開發上會遇到的問題我大致上分成三種。
Responsive Design(響應式設計): 不管是從手機或是平板使用的app,如果沒有對螢幕尺寸作適當的處理,通常直接放到web都會直接跑版,官方文件也有一個篇章在介紹響應式設計。
Cross-Platform Support Package(跨平台支援套件): 在開發過程中會有一定程度的使用第三方的package,要注意是否有支援所需要的平台特別是web,通常可以在pub.get查到。
Platform Dependency Feature(平台相依性功能): 因為不同平台還是會有差異存在,有些dart自帶的library本身就不支援,比如說web就不能使用dart:io相關的函式,因此在開發的時候需要特別注意。如果需要針對不同的平台用該平台才有支援的widget,通常會先用邏輯判斷目前使用者是使用哪個平台,再渲染該平台特有的widget。
以上是自己在投入開發Flutter到打開web支援的一些心得整理,開發過程也許遇到許多不同的問題,特別是在web支援的部份遇到了許多挑戰。雖然花了許多時間解決各種遇到的轉換問題,但確實可以達到透過single codebase在web和app渲染出一樣的畫面!