前言
學習一個新的事物,總是有很多的方法和路徑,作為一個老鳥,我決定用套路經驗法來揭開它的套路,甭管他是什么磚,對于搬磚的人來說,搬磚的動作是那么相似,我想,flutter也不外如此。
抽象開發過程
現代程序員的開發過程,滿滿的都是套路,通過簡單的抽象,大致包含以下幾個重點:
編程目標 (我要做什么)
-
開發環境 (準備工作)
- 開發語言選擇
- 系統環境
- 依賴的軟件環境
- 開發工具集
-
新建一個工程項目 (開始干)
- 創建一個新的工程
- 工程結構
- 工程配置
- 編碼
- 編譯、運行/打包
總結經驗 (繼續干)
抽絲剝繭
通過上面對軟件開發過程的抽象,我們順著這種思路前進,來一場 Flutter 開發過程之旅。
編程目標
引述 Flutter 中文網 (https://flutterchina.club) 的一句描述: "極速構建漂亮的原生應用"。 所以,我們可以用 Flutter 來快速開發 iOS/android 應用,它可以跨平臺運行。
另外,總結一下對它的介紹:
-
開發快速
一套編碼,多端運行、可熱重載。
-
富有表現力,漂亮的用戶界面
Flutter 內置豐富漂亮的 UI 組件,應該可以滿足各種 UI 設計的需要。
-
響應式開發
處理 UI、動畫、手勢。
-
靈活的開發模式
可以使用 flutter 開發一個完整的應用, 也可以支持與原生的Java / ObjC / Swift混合開發。
-
原生一樣的體驗
Flutter的實現方式決定了,flutter開發的應用具有原生一般的體驗。
對于以上的介紹,需要我們親自去體驗和論證。畢竟,別人說好吃,你不一定喜歡吃
開發環境
-
一種新的開發語言 dart
不知道寫過 java 和 js 的你會覺得有多新?
學習dart的一個福利: https://www.dartcn.com
練習dart的一個福利: https://dartpad.cn
-
開發機的操作系統
Flutter 支持 Windows、Mac、linux,選擇其中一種,安裝Flutter,作為 iOS 的老鳥,我選擇 Mac,后面主要以 Mac & iOS開發為主進行介紹。
-
依賴的軟件環境:
Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
選擇對應 Mac 系統的版本進行下載, 下載的時候可以選擇幾種渠道, 所謂渠道,我們可以理解為是 Flutter的版本管理,而一個渠道就是一個分支。
stable (最近最穩定的版本, 通常是季度更)
beta (月發布版,選擇上一個最穩定通過線上驗證沒有出現大問題的dev版本)
dev (通過google 內部測試,可能還沒有或者正在線上測試,即還未通過線上測試)
master (最新代碼,沒有測試的代碼,你懂的)
解壓后 Flutter 目錄結構如下圖:
安裝可參考 https://flutterchina.club/setup-macos/
-
開發工具集
代碼編輯器
可以使用簡單的文本編輯器,可以使用支持Flutter插件的幾種IDE,包括:Android Studio、 VS Code等。 這里我選擇了 Android Studio 進行安裝。
安裝可參照: https://flutterchina.club/get-started/editor/#androidsstudio
安裝完后,可以開始創建 Flutter項目。
新建一個工程項目
當環境和工具都安裝完畢,現在打開 Android Studio (你也可以用VS Code)
選擇 “Start a new Flutter Project” 創建一個 Flutter 項目。
選擇Flutter Application模版后,下一步,可以看到工程已經被創建好,選擇好設備(這里選擇了 iphone 8 模擬器)之后,運行即可。
使用了插件提供的模版工程無需更多配置,只用選擇模擬器即可運行。
通過上面截圖可以看到,demo工程運行了 main.dart , iOS 的編譯使用了Xcode build。
默認在 debug 模式下會開啟 hot mode,hot mode 模式運行下,會在設備運行app后,建立一個web socket 連接,在運行過程中,對源碼進行編輯和修改,會執行熱重載,并將增量修改的內容通過與設備的socket連接進行同步,并在設備同步后執行頁面的刷新。
小結
磚頭還是那個磚頭,只是,磚頭的成分還待繼續深挖,而我們搬磚的技術,也還需要繼續提高。
本篇僅對入門事項進行了簡單的描述,后面還有更多的事情等著去做。