Flutter 环境搭建

下载并安装 Flutter

从归档列表中下载 Flutter SDK 压缩包,将压缩包移动到你想要的位置,然后解压 SDK,以此来安装 Flutter。

下载以下 Flutter SDK 最新 stable 版本的压缩包。

Intel 处理器
Apple Silicon 处理器

关于其他发布渠道和旧版本,请查阅 Flutter SDK 归档列表。

Flutter SDK 应该会下载至 macOS 默认下载目录: ~/Downloads/。

创建一个文件夹,用于安装 Flutter。

可以考虑在 ~/development/ 中创建一个目录。

将 Flutter SDK 压缩文件 (zip) 解压到你想要存储的目录中。可以使用以下指令进行解压。

unzip ~/Downloads/flutter_macos_arm64_3.22.3-stable.zip \
       -d ~/development/

完成后,Flutter SDK 应该会位于 ~/development/flutter 目录中。

将 Flutter 添加至 PATH

要在 Terminal 中运行 Flutter 命令,请将 Flutter 添加到 PATH 环境变量中。本指南假定你的 Mac 运行的是最新的默认 shell,zsh。 Zsh 使用 .zshenv 文件来处理 环境变量。

启动你喜欢的文本编辑器。

如果 ~/.zshenv 文件存在,请在文本编辑器中打开 Zsh 环境变量文件 ~/.zshenv。如果不存在,请创建 ~/.zshenv。

复制以下内容并粘贴到 ~/.zshenv 文件内的末尾。

export PATH=$HOME/development/flutter/bin:$PATH

保存 ~/.zshenv 文件。

请重新启动所有打开的终端会话窗口,来应用此更改。

新建工程

执行命令 flutter create xtdatademo来新建一个名为 xtdatademo 的工程,就会生成 xtdatademo 文件夹。
我们看一下目录结构:

mac@macdeMacBook-Pro xtdatademo % tree -L 2
.
├── analysis_options.yaml
├── android
│   ├── app
│   ├── build.gradle.kts
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── local.properties
│   ├── settings.gradle.kts
│   └── xtdatademo_android.iml
├── build
│   ├── ae3d9b3d312770fa9bc265eb4927fc9e
│   ├── f61019181a390ebae04f980d79c3991a.cache.dill.track.dill
│   ├── ios
│   ├── macos
│   └── native_assets
├── ios
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── RunnerTests
├── lib
│   └── main.dart
├── linux
│   ├── CMakeLists.txt
│   ├── flutter
│   └── runner
├── macos
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── RunnerTests
├── pubspec.lock
├── pubspec.yaml
├── README.md
├── test
│   └── widget_test.dart
├── web
│   ├── favicon.png
│   ├── icons
│   ├── index.html
│   └── manifest.json
├── windows
│   ├── CMakeLists.txt
│   ├── flutter
│   └── runner
└── xtdatademo.iml

可以发现,多个系统(windows、web、iOS、Android、Linux)都有其对应的目录。也就是说,他可以运行在多个平台上。
我们执行 flutter run可以让他运行起来。

你会看到命令行有如下类似输出:

A Dart VM Service on macOS is available at: http://127.0.0.1:57188/wmv-OF_wM98=/
The Flutter DevTools debugger and profiler on macOS is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:57188/wmv-OF_wM98=/
Lost connection to device.
mac@macdeMacBook-Pro xtdatademo % flutter run
Launching lib/main.dart on iPhone 17 Pro Max in debug mode...
Running Xcode build...                                                  
Xcode build done.                                           284.3s
Syncing files to device iPhone 17 Pro Max...                       125ms

Flutter run key commands.
r Hot reload. 
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

A Dart VM Service on iPhone 17 Pro Max is available at: http://127.0.0.1:60339/eH0aIuqq814=/
The Flutter DevTools debugger and profiler on iPhone 17 Pro Max is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:60339/eH0aIuqq814=/

然后启动模拟器(第一次启动会稍慢)

flutter模拟器展示

注意
执行 flutter run 后,终端会显示可以执行的平台,选中我们想要的平台即可。如果你想运行在 iOS 或者 Android 终端,你需要连接相应的设备或者模拟器。

开始编写

Flutter 环境搭建好后,我们就可以开始写代码了。
由于 xcode 对于 Dart 的语法支持几乎没有,所以我们安装 VS Code,并且安装 Flutter 插件:

vscode展示

安装好插件后,我们就不需要借助命令行的 flutter run 命令启动 flutter 了。而是在 vscode 中直接操作:

vscode展示