flutter作為谷歌推出的跨平臺開發語言，是目前主流的跨平臺語言選擇。下面會從0到1的學習和使用這門語言

1.下載開發工具

首先需要下載對應的開發工具：

1. JDK
2. Flutter SDK
3. Android Studio
4. VSCode（主力代碼開發工具）
5. Xcode

因為個人用的macbook作為開發工具，后續都是mac端的操作記錄，但windows端也是大同小異，可作為參考。（搭建環境較為復雜，出問題的點也比較多，遇到問題多百度百度解決問題）

1.jdk安裝地址（官網需要賬戶才能下載，如無賬戶可百度搜索下載）：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

mac版本jdk

2.flutter sdk地址：https://flutter.io/sdk-archive/

flutter最新版本sdk

3.Android Studio地址：http://www.android-studio.org

下載Mac端

4.VSCode地址：https://code.visualstudio.com
編譯器中文化（默認是英文）：打開軟件后->點擊左面的拓展圖標->在搜索框輸入chinese->點擊Install下載->重啟VSCode

5.XCode：可在App Store搜索后下載

下載好后進行安裝

1.jdk：直接安裝即可，安裝后進入終端輸入 java -version，如果出現版本號java version "1.8.0_181"，就是安裝成功
2.flutter sdk：下載成功后可得到如下文件

3.Android Studio：下載后一路next安裝即可

下面為flutter配置環境變量

1. 打開終端工具，使用vim進行配置環境變量，命令如下：

vim ~/.bash_profile

2. 在打開的文件后發現是空白的，只需按i、I、a、A、o、O、r和R中某個鍵即可。進入編輯模式，增加一行代碼

export PATH=/Users/XXX/Desktop/flutter/bin:$PATH

提示：這行命令你要根據你把flutter文件的位置來進行編寫，寫的是你的路徑，很有可能不跟文章一樣。可以把語句從后刪除到=號位置，之后拖動文件得到具體路徑即可。

輸入完路徑后按下圖退出vim的編輯模式

(注意冒號要用英文標點的冒號，如果用中文冒號會沒效果)，另外如果vim編輯器出了故障可以退出終端再次進入，如出現E325: ATTENTION可以選d

3. 配置文件完成后，使用 source 命令重新加載一下（每次重啟后使用flutter都要配置一下），具體命令如下：

source ~/.bash_profile

4. 使用命令檢查是否安裝成功，具體命令如下：

flutter -h

出現flutter可用命令提示后，表示安裝成功。

成功標識

檢查開發環境

上面步驟完成，代表flutter環境已搭建完成，現在我們檢查下開發環境是否可用，在終端輸入如下命令

flutter doctor

顯示結果如下

[?] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
[?] Android toolchain - develop for Android devices
    ? Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Xcode - develop for iOS and macOS (Xcode 11.6)
    ? 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
[!] Android Studio (version 4.0)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.49.0)
    ? Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
 
[!] Connected device                          
    ! No devices available

! Doctor found issues in 5 categories.

可以看到顯示有5處警告（一個?，四個??），那么首先我們先解決Android前面的?。（如果有多余的報錯，可能是有的工具沒有下載完成，請參照上面的鏈接把工具下載完整）

注意：帶?的就必須安裝，帶??的就可以暫時忽略。

解決帶?的問題

Android Studio安裝flutter
打開軟件后點擊左下角的Configure后選擇Plugins
搜索flutter后點擊Install，安裝好即可

安裝完成后會有創建flutter的選項

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ? Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

之后根據提示在終端輸入如下代碼，運行過程一路選擇y

flutter doctor --android-licenses

再次運行后就會提示

[?] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

完成上述過程，安卓?已解決 ~~~

接下來我們解決剩余??

1. Xcode報錯

[!] Xcode - develop for iOS and macOS (Xcode 11.6)
    ? 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

上面的報錯就是提示沒有安裝cocoapods，按照提示在終端輸入：sudo gem install cocoapods，出現密碼提示輸入開機密碼就開始安裝了。之后就是漫長的等待啦，等安裝完成會出現cocoapods after 35 seconds 32 gems installed，相關的Xcode報錯會變成

[?] Xcode - develop for iOS and macOS (Xcode 11.6)

2. VS Code報錯

[!] VS Code (version 1.49.0)
    ? Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

打開vscode搜索并安裝flutter，安裝flutter時會自動安裝Dart語言

安裝后對應的vscode報錯也會消失

3. 虛擬機報錯

[!] Connected device
    ! No devices available

這個報錯是提示沒有虛擬機，這里可以選擇真機調試也可以安裝使用虛擬機，下面是安裝虛擬機教程
打開Android Studio軟件，選擇新建flutter項目

image.png

下載完成

以上操作全部執行完，再次運行flutter doctor

[?] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
 
[?] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[?] Xcode - develop for iOS and macOS (Xcode 11.6)
[?] Android Studio (version 4.0)
[?] VS Code (version 1.49.0)
[?] Connected device (1 available)

? No issues found!

至此，flutter安裝完成！全部對號，縱享絲滑~~~

下面就可以編寫flutter項目代碼啦，可以參照下一篇文章
Flutter基礎篇: helloword

感謝閱讀！~~~ ?