VSCode+Flutter安裝環(huán)境配置教程

簡單介紹

1铣鹏、安裝vscode敷扫，并安裝Flutter；
2诚卸、為保證正常運行葵第，自行安裝xcode和Android studio；
3惨险、從零開始配置羹幸，手把手教學(xué)，如有疑問請留言辫愉；

安裝VSCode

1栅受、安裝地址

點擊下載：https://code.visualstudio.com/Download

下載@2x.png

2、如果沒有梯子恭朗，需要耐心等待

3屏镊、下載完成

下載完成，在下載文件夾下痰腮。

下載完成.png

4而芥、雙擊打開已下載的安裝包

此時可能遇到電腦風火墻，在設(shè)置-隱私中打開膀值，或者部分電腦可以直接點擊打開棍丐。

防火墻提示.png

5、首次打開

首次打開沧踏，我這邊遇到提醒歌逢，點擊設(shè)置如下。

首次打開提醒.png

6翘狱、移動到程序中

打開下載文件夾秘案，拖動VSCode到應(yīng)用程序中即可。

32ee9aa0cf4181c35d3a1aff608e173.png

7、安裝完畢

此時阱高，VSCode安裝完畢赚导。面板就第一次展現(xiàn)在你的面前了。
接下來就是安裝相關(guān)的框架和SDK赤惊。

SDK@2x.png

安裝FlutterSDK

1吼旧、下載FlutterSDK

點擊下載
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

2、移動sdk到指定文件夾

移動flutter到指定文件夾.png

3荐捻、打開終端執(zhí)行

open .bash_profile

4黍少、將配置路徑保存到文件中

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/demo/flutter/bin:$PATH

peizhi 1.png

5、另存

open ~/.zshrc

另存.png

6处面、保存后執(zhí)行

source ~/.zshrc

7厂置、此時我重啟了一次電腦

這里有個坑，我在第一次安裝時魂角，未重啟電腦昵济，導(dǎo)致后續(xù)無論怎么調(diào)試，都是錯誤的野揪。重啟終端執(zhí)行：

flutter -h

此時會有防火墻访忿，點擊取消，打開防火墻斯稳，再次執(zhí)行即可海铆。

vscode的配置

1、打開vscode-Extensions

W.png

2挣惰、檢查Flutter并安裝

install flutter.png

3卧斟、同理檢查Dart并安裝

W31.png

4、點擊view-command palette...

快捷鍵 command+shift+p選擇

run flutter doctor

目的是為了檢查flutter安裝情況

doctor.png

此時根據(jù)提示憎茂，發(fā)現(xiàn)存在兩個問題：

[!] Flutter (Channel stable, 2.0.5, on Mac OS X 10.15.5 19F101 darwin-x64, locale zh-Hans-CN)
    ? Flutter version 2.0.5 at /Users/demo/flutter
    ? Framework revision adc687823a (13 days ago), 2021-04-16 09:40:20 -0700
    ? Engine revision b09f014e96
    ? Dart version 2.12.3
    ? Pub download mirror https://pub.flutter-io.cn
    ? Flutter download mirror https://storage.flutter-io.cn
    ? Downloaded executables cannot execute on host.
      See https://github.com/flutter/flutter/issues/6207 for more information


[!] Android toolchain - develop for Android devices (Android SDK version 28.0.0)
    ? Android SDK at /Users/demo/Library/Android/sdk
    ? Flutter requires Android SDK 29 and the Android BuildTools 28.0.3
      To update the Android SDK visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[?] Xcode - develop for iOS and macOS
    ? Xcode at /Applications/Xcode.app/Contents/Developer
    ? Xcode 12.4, Build version 12D4e
    ? CocoaPods version 1.10.0

[?] Chrome - develop for the web
    ? Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[?] Android Studio (version 3.6)
    ? Android Studio at /Applications/Android Studio.app/Contents
    ? Flutter plugin version 45.1.1
    ? Dart plugin version 192.8052
    ? Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[?] VS Code (version 1.55.2)
    ? VS Code at /Applications/Visual Studio Code.app/Contents
    ? Flutter extension version 3.21.0

[?] Connected device (1 available)
    ? Chrome (web) ? chrome ? web-javascript ? Google Chrome 90.0.4430.93

! Doctor found issues in 2 categories.
exit code 0

①珍语、根據(jù)提示執(zhí)行

flutter doctor --android-licenses

需要用戶輸入y確認。執(zhí)行完成后竖幔，不要著急解決第二個問題板乙。重復(fù)run flutter doctor步驟。此時還剩余1個問題拳氢。

②募逞、升級AndroidSDK

測試

1、點擊view-command palette 快捷鍵command+shift+p創(chuàng)建一個Flutter項目

WtIMG34.png

2馋评、此時注意凡辱，項目名要小寫

image.png

3、選擇我們需要運行的模擬器