建议先看官方文档, 下面是作者自己的搭建过程,仅供参考
官方中文文档
一、Flutter SDK
1.Flutter官网下载其最新可用的安装包下载SDK
Flutter官网SDK下载
2.解压安装包到你指定的目录，可以右键用解压工具,也可以用下面命令
cd ~/development
unzip ~/Downloads/flutter_macos_1.17.1-stable.zip
3.如果下面指令只在当前命令行窗口执行, 该设置PATH环境变量是临时的，要想永久将Flutter添加到PATH,需要将下面代码添加到.bash_profile文件中:
首先终端输入, 打开.bash_profile文件
open ~/.bash_profile
.bash_profile文件中添加下面环境配置
#Flutter环境变量SDK地址
export PATH=本地flutter路径/bin:$PATH
#google提供服务地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
其中google提供服务地址 也可以使用上海交通大学的镜像地址
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
4.运行source ~/.bash_profile命名, 刷新当前终端窗口。
source ~/.bash_profile
或者运行
source $HOME/.bash_profile
注意: 如果你使用终端是zsh，终端启动时
~/.bash_profile将不会被加载，解决办法就是修改～/.zshrc，在其中添加：source ～/.bash_profile
- 打开.zshrc文件
open ~/.zshrc
- 在其中添加：
source ～/.bash_profile保存退出,执行souce ~/.zshrc
source ~/.zshrc
5.验证“flutter/bin”是否已在PATH中：
echo $PATH
二、当前终端窗口检测flutter环境
flutter doctor
完成提示:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.1, on Mac OS X 10.15.4 19E287, locale
zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.45.1)
[✓] Connected device (1 available)
• No issues found!
三、安装Android Studio
如果想为Flutter配置Android开发环境，需要在我们的电脑上安装一个Android Studio。
Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。
1.建议从官网下载安装3.5.3版使用, 用最新版3.6.3有和Flutter和Dart插件兼容问题
2.下载Flutter和Dart插件
Android Studio安装完后下载Flutter和Dart插件
Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等)。
Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等)。点击左上角Android Studio进入Preferences
- Plugins中搜索Flutter, 选择第一个Flutter点击install按钮，同样下载Dart。
3.添加模拟器
1>. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device。
2>. 选择一个设备并选择 Next。
3>. 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image。
4>. 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速。
5>. 验证AVD配置是否正确，然后选择 Finish。
有关上述步骤的详细信息，请参阅 Managing AVDs.
6>. 在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。
7>. 运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86。
4. 查看AndroidSDK路径
-
启动界面中Android Studio可以查看AndroidSDK路径, 启动页点击Configure->SDKManager。如下图:
或者选择顶部菜单栏 Android Studio>Tools>Android>SDK Manager
四、VSCode 配置
1) 安装flutter和Dart插件
1.启动 VS Code。
2.选择扩展。
3.在搜索框输入 flutter ，在搜索结果列表中选择 Flutter (只有未安装插件才显示Install按钮) ，然后点击 Install。同样搜索Dart后同样安装操作。
4.选择 ‘OK’ 重新启动 VS Code。
5.验证配置:
- 调用 View>Command Palette…
- 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
- 查看“OUTPUT”窗口中的输出是否有问题
2) VSCode中文配置
1.打开“vscode” ，按快捷键“Ctrl+Shift+P”。
2.在顶部搜索框中输入“configure language”，按回车键。
3.“vscode”里面就会打开一个语言配置文件，将“en-us”修改成“zh-cn”，按“Ctrl+S”保存设置，重启“vscode”就可以了.
4.如果没有zh-cn ,点击下面 Install additional languages, 下载中文语言包后,再次重复上面操作.
3) VSCode代码提示配置
代码片段
Flutter Widget Snippets: 提供 Widget 代码片段
Awesome Flutter Snippets: 提供常用函数的代码片段。使用起来非常方便，例如创建一个 Stateful App，只需要输入 fstful，即可快速创建。高亮
Bracket Pair Colorizer
vscode 自动会为 Dart 代码进行高亮显示，因此无需下载其他高亮插件。但是写过 Flutter 的应该都会觉得， Flutter 简直就是嵌套地狱。因此推荐这个插件，可对括号进行高亮匹配显示，这样更易于阅读以及修改代码。
