Flutter入門並實戰天氣預報APP(1)——Flutter安裝

Flutter入門並實戰天氣預報APP(1)——Flutter安裝

1. Flutter是什麼

Flutter是由谷歌推出的一個移動UI框架，可以讓開發者快速的在Android和iOS上構建高質量的原生用戶界面。

通過它來編寫APP的好處在於：

• 它內置了Android的Material Design風格和iOS的Cupertino風格的UI；
• 它通過Dart語言編寫，只需要編寫一份代碼就能在Android和iOS設備上得到同樣的運行效果；
• 他有熱重載功能，只需要運行APP後，代碼更改一點然後點擊熱重載鍵就能快速顯示出修改後的界面。

2. 使用鏡像安裝

由於一些衆所周知的原因，Flutter在國內訪問有時候會受到限制，因此Flutter官方爲國內開發者搭建了臨時鏡像，大家可以將下面的環境變量添加到系統中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

由於我用的是macOS，因此我就只演示macOS的。
如果有Linux的用戶則和macOS 的安裝方式類似，甚至可以說一樣；
但是對於Windows用於，需要大家桌面右鍵此電腦->屬性->彈出頁面左側欄的高級系統設置->環境變量，在下面的系統環境變量欄中點擊新建，變量名輸入上面等號左邊的大寫內容，不要export，值輸入等號右邊的內容，輸入一組之後再點擊新建接着輸入下一組。

接下來我們開始說macOS。

2.1 首先你得確定你用的是什麼shell

如果你沒更改過你macOS終端設置，那麼你默認就是bash，但是如果你更改過，比方說我就換成了zsh，那麼我覺得你應該知道在哪設置環境變量。

2.2 如果你是bash

首先打開你macOS的終端，在啓動臺裏面可以找到，接着對bash的環境變量進行設置，輸入

vim ~/.bash_profile

回車，進入.bash_profile文件的編輯頁面，然後按下鍵盤I鍵，進入vim的編輯模式，然後直接把上面的export環境變量賦值粘貼進去。然後按下Esc鍵退出vim的編輯模式，然後直接輸入:wq回車保存並退出。
接着輸入

source ~/.bash_profile

讓剛剛配置的環境變量生效即可。

2.3 如果你是zsh

首先打開你macOS的終端，在啓動臺裏面可以找到，接着對zsh的環境變量進行設置，輸入

vim ~/.zshrc

回車，進入.zshrc文件的編輯頁面，找到如圖所示部分（重點在於有# export MANPATH="/Usrs/......的地方，因爲我還有其它的環境變量，所以你的可能和我的不同）：

在# export下面，按下鍵盤I鍵，進入vim的編輯模式，然後直接把上面的export環境變量賦值粘貼進去。
見我圖中最下面標紅的那地方，至於最後一行export PATH=~/development/flutter/bin:$PATH先不管。然後按下Esc鍵退出vim的編輯模式，然後直接輸入:wq回車保存並退出。
接着輸入

source ~/.zshrc

讓剛剛配置的環境變量生效即可。

3. 下載Flutter SDK

3.1 先去Flutter的官網去下載你對應系統的Flutter SDK

1. 打開官網下載頁：Flutter SDK release
2. 選擇你的系統對應的目錄，然後默認選擇Stable channel下載。(*Master channel這個是直接從github獲取的github上的最新版，也就是說Flutter的開發者他寫了點什麼改了點什麼都會里面在這個版本上顯示出來，所以這個版本意味着非常不穩定，可能bug很多；Dev channel是開發版，Master channel經過一定測試之後的版本會發布到Dev channel上，但是不是大量的測試，所以可能還是不太穩定；Beta channel是測試版，每月發佈一次，會把上個月所釋放的所有Dev channel中最穩定的版本釋放到Beta channel上，但是相對來說還是有點不穩定，適合想嚐鮮的開發者；State channel是標準版，當Flutter維護人員認爲某個版本足夠穩定之後，就會發送到這個版本上去，一般開發者最好還是使用這個版本)

3.2 解壓安裝包到你想要的目錄

例如

// Linux/macOS
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

3.3 添加Fluuter路徑到環境變量中

回顧第2項，把如下內容添加到環境變量中去

export PATH=/你上一步flutter解壓的目錄/flutter/bin:$PATH

3.4 運行Flutter doctor

如果是macOS/Linux，直接在終端中輸入flutter doctor即可。
如果是Windows，則右鍵開始，選擇PowerShell，然後輸入flutter doctor即可。

這個命令的功能是檢查你的Flutter是否正常安裝。

如果正常安裝的話會出現如下信息：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to
        your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
        pod setup
[✓] Android Studio (version 3.5)
[!] IntelliJ IDEA Community Edition (version 2019.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.38.1)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

我的電腦運行之後會出現兩個錯誤，因爲Flutter doctor會自動檢查電腦中所有能運行Flutter的編輯器或者IDE，然後判斷他們配沒配置Flutter。我的電腦是因爲沒有安裝Xcode以及我沒有在IDEA中配置Flutter，所以我這兩項出錯。

其實你只要保證除了IDE之外的項目都是正常的就行了，如果有錯的話直接把報錯信息放到百度裏面進行搜索就可以了。至於IDE項目，如果你是iOS開發者，則保證Xcode或者是AppCode啥的前面是✔️就行了的，至於你電腦上的其它例如IDEA或者vscode啥的可以不用管；如果你是Android開發者，則保證你常用的IDE如Android Studio前面是✔️就行了的，至於你電腦上的其它例如IDEA或者vscode啥的可以不用管。

總而言之，確保除了IDE之外的其它項前面是對勾，然後確定一個你常用的寫代碼的工具前面有對勾就行了，如果你除了IDE之外的其它項有問題，就把錯誤信息直接百度；如果是你常用的IDE前面沒對勾，那就百度你常用的IDE+Flutter來參考別人的配置教程。

---

由於我沒有用過xcode所以就不講xcode如何配置Flutter了，就分別講如何在AndroidStudio和vscode配置Flutter。

---

4. Android Studio配置Flutter

1. 打開你Android Studio的設置/首選項/Preferences，然後選擇Plugins，在Marketplace裏面搜索Flutter：
   

2. 接着點擊INSTALL安裝就行了，並且安裝Flutter插件會自動順帶安裝Dart插件，如果沒有安裝Dart插件，你就一樣的搜索Dart然後安裝即可；

3. 安裝完成並重啓Android Studio之後，仍然打開設置/首選項/Preferences，選擇Languages & Frameworks->Flutter，在最上面的SDK中的Flutter SDK path選擇你第三步Flutter SDK解壓縮的路徑，不出意外的話下面Version會自動顯示你Flutter SDK的版本，並且Languages & Frameworks->Dart裏面的Dart SDK path也會自動出現。

4. 接着和之前一樣運行flutter doctor,看看Android Studio前面有沒有✔️，正常情況下是會有的。

5. vscode 配置Flutter

1. 在vscode拓展裏面搜索Flutter和Dart，安裝；
   

2. 接着和之前一樣運行flutter doctor,看看vscode前面有沒有✔️，正常情況下是會有的。