Flutter 撥開云霧篇(入門)

前言

學習一個新的事物,總是有很多的方法和路徑,作為一個老鳥,我決定用套路經驗法來揭開它的套路,甭管他是什么磚,對于搬磚的人來說,搬磚的動作是那么相似,我想,flutter也不外如此。

抽象開發過程

現代程序員的開發過程,滿滿的都是套路,通過簡單的抽象,大致包含以下幾個重點:

  • 編程目標 (我要做什么)

  • 開發環境 (準備工作)

    1. 開發語言選擇
    2. 系統環境
    3. 依賴的軟件環境
    4. 開發工具集
  • 新建一個工程項目 (開始干)

    1. 創建一個新的工程
    2. 工程結構
    3. 工程配置
    4. 編碼
    5. 編譯、運行/打包
  • 總結經驗 (繼續干)

抽絲剝繭

通過上面對軟件開發過程的抽象,我們順著這種思路前進,來一場 Flutter 開發過程之旅。


編程目標

引述 Flutter 中文網 (https://flutterchina.club) 的一句描述: "極速構建漂亮的原生應用"。 所以,我們可以用 Flutter 來快速開發 iOS/android 應用,它可以跨平臺運行。
另外,總結一下對它的介紹:

  • 開發快速

一套編碼,多端運行、可熱重載。

  • 富有表現力,漂亮的用戶界面

Flutter 內置豐富漂亮的 UI 組件,應該可以滿足各種 UI 設計的需要。

  • 響應式開發

處理 UI、動畫、手勢。

  • 靈活的開發模式

可以使用 flutter 開發一個完整的應用, 也可以支持與原生的Java / ObjC / Swift混合開發。

  • 原生一樣的體驗

Flutter的實現方式決定了,flutter開發的應用具有原生一般的體驗。

對于以上的介紹,需要我們親自去體驗和論證。畢竟,別人說好吃,你不一定喜歡吃


開發環境

  1. 一種新的開發語言 dart

不知道寫過 java 和 js 的你會覺得有多新?
學習dart的一個福利: https://www.dartcn.com
練習dart的一個福利: https://dartpad.cn

  1. 開發機的操作系統

Flutter 支持 Windows、Mac、linux,選擇其中一種,安裝Flutter,作為 iOS 的老鳥,我選擇 Mac,后面主要以 Mac & iOS開發為主進行介紹。

  1. 依賴的軟件環境:

Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
選擇對應 Mac 系統的版本進行下載, 下載的時候可以選擇幾種渠道, 所謂渠道,我們可以理解為是 Flutter的版本管理,而一個渠道就是一個分支。
stable (最近最穩定的版本, 通常是季度更)
beta (月發布版,選擇上一個最穩定通過線上驗證沒有出現大問題的dev版本)
dev (通過google 內部測試,可能還沒有或者正在線上測試,即還未通過線上測試)
master (最新代碼,沒有測試的代碼,你懂的)
解壓后 Flutter 目錄結構如下圖:

Fluuter目錄結構

安裝可參考 https://flutterchina.club/setup-macos/

  1. 開發工具集

代碼編輯器
可以使用簡單的文本編輯器,可以使用支持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插件后,選擇創建Flutter項目的選項
選擇Flutter應用工程模版

選擇Flutter Application模版后,下一步,可以看到工程已經被創建好,選擇好設備(這里選擇了 iphone 8 模擬器)之后,運行即可。


Flutter工程目錄結構,demo運行效果

使用了插件提供的模版工程無需更多配置,只用選擇模擬器即可運行。

通過上面截圖可以看到,demo工程運行了 main.dart , iOS 的編譯使用了Xcode build。
默認在 debug 模式下會開啟 hot mode,hot mode 模式運行下,會在設備運行app后,建立一個web socket 連接,在運行過程中,對源碼進行編輯和修改,會執行熱重載,并將增量修改的內容通過與設備的socket連接進行同步,并在設備同步后執行頁面的刷新。

小結

磚頭還是那個磚頭,只是,磚頭的成分還待繼續深挖,而我們搬磚的技術,也還需要繼續提高。
本篇僅對入門事項進行了簡單的描述,后面還有更多的事情等著去做。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。