flutter作為谷歌推出的跨平臺(tái)開(kāi)發(fā)語(yǔ)言，是目前主流的跨平臺(tái)語(yǔ)言選擇。下面會(huì)從0到1的學(xué)習(xí)和使用這門(mén)語(yǔ)言

1.下載開(kāi)發(fā)工具

首先需要下載對(duì)應(yīng)的開(kāi)發(fā)工具：

1. JDK
2. Flutter SDK
3. Android Studio
4. VSCode（主力代碼開(kāi)發(fā)工具）
5. Xcode

因?yàn)閭€(gè)人用的macbook作為開(kāi)發(fā)工具，后續(xù)都是mac端的操作記錄，但windows端也是大同小異，可作為參考。（搭建環(huán)境較為復(fù)雜，出問(wèn)題的點(diǎn)也比較多，遇到問(wèn)題多百度百度解決問(wèn)題）

1.jdk安裝地址（官網(wǎng)需要賬戶才能下載，如無(wú)賬戶可百度搜索下載）：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
編譯器中文化（默認(rèn)是英文）：打開(kāi)軟件后->點(diǎn)擊左面的拓展圖標(biāo)->在搜索框輸入chinese->點(diǎn)擊Install下載->重啟VSCode

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

下載好后進(jìn)行安裝

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

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

下面為flutter配置環(huán)境變量

1. 打開(kāi)終端工具，使用vim進(jìn)行配置環(huán)境變量，命令如下：

vim ~/.bash_profile

2. 在打開(kāi)的文件后發(fā)現(xiàn)是空白的，只需按i、I、a、A、o、O、r和R中某個(gè)鍵即可。進(jìn)入編輯模式，增加一行代碼

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

提示：這行命令你要根據(jù)你把flutter文件的位置來(lái)進(jìn)行編寫(xiě)，寫(xiě)的是你的路徑，很有可能不跟文章一樣?？梢园颜Z(yǔ)句從后刪除到=號(hào)位置，之后拖動(dòng)文件得到具體路徑即可。

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

(注意冒號(hào)要用英文標(biāo)點(diǎn)的冒號(hào)，如果用中文冒號(hào)會(huì)沒(méi)效果)，另外如果vim編輯器出了故障可以退出終端再次進(jìn)入，如出現(xiàn)E325: ATTENTION可以選d

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

source ~/.bash_profile

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

flutter -h

出現(xiàn)flutter可用命令提示后，表示安裝成功。

成功標(biāo)識(shí)

檢查開(kāi)發(fā)環(huán)境

上面步驟完成，代表flutter環(huán)境已搭建完成，現(xiàn)在我們檢查下開(kāi)發(fā)環(huán)境是否可用，在終端輸入如下命令

flutter doctor

顯示結(jié)果如下

[?] 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處警告（一個(gè)?，四個(gè)??），那么首先我們先解決Android前面的?。（如果有多余的報(bào)錯(cuò)，可能是有的工具沒(méi)有下載完成，請(qǐng)參照上面的鏈接把工具下載完整）

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

解決帶?的問(wèn)題

Android Studio安裝flutter
打開(kāi)軟件后點(diǎn)擊左下角的Configure后選擇Plugins
搜索flutter后點(diǎn)擊Install，安裝好即可

安裝完成后會(huì)有創(chuàng)建flutter的選項(xiàng)

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

之后根據(jù)提示在終端輸入如下代碼，運(yùn)行過(guò)程一路選擇y

flutter doctor --android-licenses

再次運(yùn)行后就會(huì)提示

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

完成上述過(guò)程，安卓?已解決 ~~~

接下來(lái)我們解決剩余??

1. Xcode報(bào)錯(cuò)

[!] 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

上面的報(bào)錯(cuò)就是提示沒(méi)有安裝cocoapods，按照提示在終端輸入：sudo gem install cocoapods，出現(xiàn)密碼提示輸入開(kāi)機(jī)密碼就開(kāi)始安裝了。之后就是漫長(zhǎng)的等待啦，等安裝完成會(huì)出現(xiàn)cocoapods after 35 seconds 32 gems installed，相關(guān)的Xcode報(bào)錯(cuò)會(huì)變成

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

2. VS Code報(bào)錯(cuò)

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

打開(kāi)vscode搜索并安裝flutter，安裝flutter時(shí)會(huì)自動(dòng)安裝Dart語(yǔ)言

安裝后對(duì)應(yīng)的vscode報(bào)錯(cuò)也會(huì)消失

3. 虛擬機(jī)報(bào)錯(cuò)

[!] Connected device
    ! No devices available

這個(gè)報(bào)錯(cuò)是提示沒(méi)有虛擬機(jī)，這里可以選擇真機(jī)調(diào)試也可以安裝使用虛擬機(jī)，下面是安裝虛擬機(jī)教程
打開(kāi)Android Studio軟件，選擇新建flutter項(xiàng)目

image.png

下載完成

以上操作全部執(zhí)行完，再次運(yùn)行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安裝完成！全部對(duì)號(hào)，縱享絲滑~~~

下面就可以編寫(xiě)flutter項(xiàng)目代碼啦，可以參照下一篇文章
Flutter基礎(chǔ)篇: helloword

感謝閱讀！~~~ ?