Flutter 作为火热的跨端工具包，在 github 上超过 120k 的关注量，可见一斑。
基于目前本人正在学习 Flutter 的路上，会将整个学习的过程记录下来。
本博文主要讲解环境的搭建，先把项目搭建好，跑通 demo 才有玩下去的必要和成就感，你说是吧？
本人开发环境
- macOS Big Sur 版本 11.2 芯片 Apple M1
- 磁盘空间：> 2.8 GB （要求的最小的空间）
- $SHELL
echo $SHELL /bin/bash 复制代码
⚠️ 之后出现并解决的问题都是基于本人的环境
安装 Flutter
通过官网下载安装包。
将安装包放到自己想存放的地方。这里，我放在 文稿 -> sdk 方便管理，然后解压下载包。
配置 flutter 的 PATH 环境变量，格式如下：
export PATH=$PATH:${pwd}/flutter/bin 或 export PATH=${pwd}/flutter/bin:$PATH 复制代码
这里我需要编辑 ~/.bash_profile 文件，添加下面这行内容：
export PATH=/Users/jimmy/Documents/sdk/flutter/bin:$PATH 复制代码
安装 IDE
作为一个前端开发者，比较偏向 VS code，直接安装其稳定版即可。
因为需要调试安卓平台，还需要安装编辑器 Android Studio。 Android Studio 为 Flutter 提供了一个完整的集成开发环境。
不管 VS code 还是 Android Studio 都需要安装 Flutter 插件。
Android Studio 我还是安装在 文稿 -> sdk
注意安装android studio的路径，也许会报sdk的错误。类似错误 ❌
# [Flutter-Unable to find bundled Java version(flutter doctor), after updated android studio Arctic Fox(2020.3.1) on M1 Apple Silicon](https://stackoverflow.com/questions/68569430/flutter-unable-to-find-bundled-java-versionflutter-doctor-after-updated-andro) 复制代码
对应的解决方法：flutter-unable-to-find-bundled-java-versionflutter-doctor-after-updated-andro
验证
之后，运行 flutter doctor 或者 flutter doctor -v 来检查是否安装了必要的安装包。
下面是自己搭建环境的情况flutter doctor -v：
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.2 20D64 darwin-arm, locale zh-Hans-CN) • Flutter version 2.2.3 at /Users/jimmy/Documents/sdk/flutter • Framework revision f4abaa0735 (9 weeks ago), 2021-07-01 12:46:11 -0700 • Engine revision 241c87ad80 • Dart version 2.13.4 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/jimmy/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • Java binary at: /Users/jimmy/Documents/sdk/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2020.3) • Android Studio at /Users/jimmy/Documents/sdk/Android Studio.app/Contents # 留意 Android Studio 路径 • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) [✓] VS Code (version 1.59.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.25.0 [✓] Connected device (1 available) • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.159 • No issues found! 复制代码
出现 No issues found! 的提示，说明你捣鼓成功了～
运行 Demo
我们在 VS code 上新建一个项目：
查看 -> 命令面板 -> Flutter: New Application Project 复制代码
初始化项目之后，运行 -> 启动调试，然后按照下图运行应用：
如果选中 Chrome web 会直接调起你安装好的谷歌浏览器。
如果选中 Start iOS Simulator 会调起 xCode 的模拟器。
如果选中 Start Pixel 2 API 31 会调起 Android Studio 的模拟器。
当然你得在
Android Studio上预设手机型号是哪个，不然初次在VS code上调不起来。
⚠️ 如果上面的操作调不起模拟器，你还可以通过 运行 - 以非调试模式运行（启动调试） 调起来
