跟上時代潮流,一起學習Flutter

RiverLi發表於2019-05-14

文章概述

通過閱讀本文,你大致上能夠了解到如下內容:

  • 安裝Flutter
  • 建立第一個Flutter專案
  • 體驗Flutter的程式碼熱部署

Flutter

近期在Google/IO大會上flutter1.5的釋出引起了業內很大的討論,是時候著手感受一下它的開發體驗了,總體來說Flutter的安裝體驗非常棒,幾乎沒遇到什麼困難。我的機器是MacOS 10.14.3

安裝

下載flutterSDK flutter_macos_1.5.4 , 下載之後解壓改檔案到指定目錄,我的目錄如下:

/Users/riverli/my/flutter
複製程式碼

將flutter命令新增到系統環境中,在.bash_profile中新增如下程式碼:

export PATH="$PATH:/Users/riverli/my/flutter/flutter/bin"
複製程式碼

環境檢測:

執行 flutter doctor 命令,會在命令列中列出你的環境問題,只需要根據提示安裝即可。達到如下效果即表示你的環境沒有問題。

~ $ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.3 18D109, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[✓] Connected device (1 available)

• No issues found!
複製程式碼

我是使用Android Studio寫flutter程式碼的,如果你不想使用Android Studio可以不用安裝。Android Studio需要安裝flutter外掛才能開發程式碼;需要裝兩個外掛flutter和Dart。安裝flutter的過程中需要自動安裝Dart。安裝過程如下,在Android Studio的偏好設定中安如下圖操作:

外掛安裝1

外掛安裝2

建立第一個flutter專案

建立專案可以通過命令列建立,也可以通過Android Studio建立,本文先使用命令列建立,後續文章會使用Android Studio建立。執行如下命令:

flutter create my_app
複製程式碼

進入建立的專案

cd my_app
複製程式碼

執行專案,執行如下命令:

flutter run
複製程式碼

你可以會遇到如下提示:

No connected devices.

Run 'flutter emulators' to list and start any available device emulators.

If you expected your device to be detected, please run "flutter doctor" to diagnose
potential issues, or visit https://flutter.dev/setup/ for troubleshooting tips.
複製程式碼

意思是說沒有找到連線的裝置,不知道專案執行到哪裡。可以執行flutter emulators 檢視模擬器列表。執行一項得到如下資訊:

 ~/my/flutter/my_app $ flutter emulators
2 available emulators:

4.7_WXGA_API_28     • 4.7in WXGA    • Generic • 4.7  WXGA API 28
apple_ios_simulator • iOS Simulator • Apple

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager
複製程式碼

我的機器上有兩個可用模擬器7_WXGA_API_28apple_ios_simulator 我們啟動其中一個,我選擇的是iOS模擬器,執行如下命令:

 ~/my/flutter/my_app $ flutter emulators --launch apple_ios_simulator
複製程式碼

之後再執行flutter run 即可啟動專案。

 ~/my/flutter/my_app $ flutter run
複製程式碼

如下圖:

跟上時代潮流,一起學習Flutter

程式碼熱部署

在我們開發Android或者iOS原生專案的時候,每次修改程式碼都需要重新啟動程式檢視修改效果,flutter不需要這麼做,在你修改完程式碼之後,只需要在命令列中安下r鍵即可部署程式碼。開發體驗十分舒適。你可以嘗試修改lib/main.dart檔案下的程式碼,如95行You have pushed the button this many times:', 嘗試修改文案,在命令列中按下r 看一看效果,這裡就不貼圖了。

總結

OK,本文要將的內容已經完結,不知道你看了之後自己的環境是否搭建好了,是否建立了你的第一個flutter專案,是否體驗了程式碼熱部署。如果你有任何問題可以關注我的公眾號,給我留言,我會第一時間幫你解答。

下面一篇文章我將講一下使用flutter做一個簡單的列表。

跟上時代潮流,一起學習Flutter

相關文章