跟上時代潮流，一塊兒學習Flutter

文章概述

經過閱讀本文，你大體上可以瞭解到以下內容：

• 安裝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的偏好設置中安以下圖操做：

建立第一個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_28 和 apple_ios_simulator 咱們啓動其中一個，我選擇的是iOS模擬器，執行以下命令：

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

以後再執行flutter run 便可啓動項目。

~/my/flutter/my_app $ flutter run
複製代碼

以下圖：

代碼熱部署

在咱們開發Android或者iOS原生項目的時候，每次修改代碼都須要從新啓動程序查看修改效果，flutter不須要這麼作，在你修改完代碼以後，只須要在命令行中安下r鍵便可部署代碼。開發體驗十分溫馨。你能夠嘗試修改lib/main.dart文件下的代碼，如95行You have pushed the button this many times:', 嘗試修改文案，在命令行中按下r 看一看效果，這裏就不貼圖了。

總結

OK，本文要將的內容已經完結，不知道你看了以後本身的環境是否搭建好了，是否建立了你的第一個flutter項目，是否體驗了代碼熱部署。若是你有任何問題能夠關注個人公衆號，給我留言，我會第一時間幫你解答。

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