VSCode+Flutter安装环境配置教程

简单介绍

1、安装vscode，并安装Flutter；
2、为保证正常运行，自行安装xcode和Android studio；
3、从零开始配置，手把手教学，如有疑问请留言；

安装VSCode

1、安装地址

点击下载：https://code.visualstudio.com/Download

下载@2x.png

2、如果没有梯子，需要耐心等待

3、下载完成

下载完成，在下载文件夹下。

下载完成.png

4、双击打开已下载的安装包

此时可能遇到电脑风火墙，在设置-隐私中打开，或者部分电脑可以直接点击打开。

防火墙提示.png

5、首次打开

首次打开，我这边遇到提醒，点击设置如下。

首次打开提醒.png

6、移动到程序中

打开下载文件夹，拖动VSCode到应用程序中即可。

32ee9aa0cf4181c35d3a1aff608e173.png

7、安装完毕

此时，VSCode安装完毕。面板就第一次展现在你的面前了。
接下来就是安装相关的框架和SDK。

SDK@2x.png

安装FlutterSDK

1、下载FlutterSDK

点击下载
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

2、移动sdk到指定文件夹

移动flutter到指定文件夹.png

3、打开终端执行

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、保存后执行

source ~/.zshrc

7、此时我重启了一次电脑

这里有个坑，我在第一次安装时，未重启电脑，导致后续无论怎么调试，都是错误的。重启终端执行：

flutter -h

此时会有防火墙，点击取消，打开防火墙，再次执行即可。

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

此时根据提示，发现存在两个问题：

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

①、根据提示执行

flutter doctor --android-licenses

需要用户输入y确认。执行完成后，不要着急解决第二个问题。重复run flutter doctor步骤。此时还剩余1个问题。

②、升级AndroidSDK

测试

1、点击view-command palette 快捷键command+shift+p创建一个Flutter项目

WtIMG34.png

2、此时注意，项目名要小写

image.png

3、选择我们需要运行的模拟器