Flutter 撥開云霧篇(入門)

前言

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

抽象開發(fā)過程

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

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

  • 開發(fā)環(huán)境 (準備工作)

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

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

抽絲剝繭

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


編程目標

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

  • 開發(fā)快速

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

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

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

  • 響應式開發(fā)

處理 UI、動畫、手勢。

  • 靈活的開發(fā)模式

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

  • 原生一樣的體驗

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

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


開發(fā)環(huán)境

  1. 一種新的開發(fā)語言 dart

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

  1. 開發(fā)機的操作系統(tǒng)

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

  1. 依賴的軟件環(huán)境:

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

Fluuter目錄結構

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

  1. 開發(fā)工具集

代碼編輯器
可以使用簡單的文本編輯器,可以使用支持Flutter插件的幾種IDE,包括:Android Studio、 VS Code等。 這里我選擇了 Android Studio 進行安裝。
安裝可參照: https://flutterchina.club/get-started/editor/#androidsstudio

安裝完后,可以開始創(chuàng)建 Flutter項目。


新建一個工程項目

當環(huán)境和工具都安裝完畢,現在打開 Android Studio (你也可以用VS Code)
選擇 “Start a new Flutter Project” 創(chuàng)建一個 Flutter 項目。


安裝了Flutter插件后,選擇創(chuàng)建Flutter項目的選項
選擇Flutter應用工程模版

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


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

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

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

小結

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容