一直想尝试Flutter,但看群里有人说Flutter开发环境搭建有点麻烦,尝试一下果真如此,所以在此记录一下。由于我使用mac,所以这篇仅针对在macOS上搭建Flutter开发环境。
一、 系统要求
- 操作系统:macOS (64-bit)
- 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间)
二、获取SDK
获取SDK有两种方式:
这步完成后,解压安装包到你想安装的目录。两种方式,一种是直接解压,即鼠标右键,第二种是使用unzip
。
三、配置Flutter环境
1、在命令行下,进入用户目录
cd $HOME
2 、打开.bash_profile文件
open -e .bash_profile
3、添加 Flutter SDK 安装的路径
在bash_profile
文件中,添加SDK安装路径,并将Flutter官方为中国开发者搭建了临时镜像添加进去
export PATH=${PATH}:`pwd`/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
其中,pwd
是SDK的安装路径,比如在我的mac中,我就要这么填写
export PATH=${PATH}:/Users/darrenW/Flutter/flutter/bin:$PATH
/Users/darrenW/Flutter
是SDK的安装路径。
后面两行是临时镜像,不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。
4、更新刚配置的环境变量
source .bash_profile
5、运行 flutter doctor
命令行输入flutter doctor
,安装 Futter 剩余依赖项。
四、编辑器设置
由于我是iOS开发,电脑上已经有Xcode
,所以不再介绍xcode的安装,至于安装Android Studio
,也不在介绍,敬请百度。
编辑器我使用的是Visual Studio Code
(VSCode大法好呀!),版本要求1.20.1
或更高版本。
1、安装Flutter插件
- 启动 VS Code
- 在应用商店中搜索
flutter
,下载安装 - 重启VS Code
2、 通过Flutter Doctor验证设置
- 调用 View>Command Palette...(快捷键shit+com+p)
- 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
- 查看“OUTPUT”窗口中的输出是否有问题
3、创建新的应用
- 调用 View>Command Palette…
- 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
- 输入 Project 名称 (如myapp), 然后按回车键
- 指定放置项目的位置,然后按蓝色的确定按钮
- 等待项目创建继续,并显示main.dart文件(在lib文件夹中)
- 运行应用程序(如果你之前没有打开Simulator,请打开,不然无法运行)
至此,Flutter环境就算搭建成功了。