1.去Flutter官网下载其最新可用的安装包。 官网地址：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos ， 跳转到官网
官网如下，根据需要下载自己需要的版本，我下载时最新版本是1.17.3，如下图：
Flutter官网
2.解压安装包到你想安装的目录，如：
cd ~/flutter
unzip ~/Downloads/flutter_macos_1.17.3-stable.zip
3.安装好后如下图：
flutter安装路径
4.由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到用户环境变量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# export PATH=`pwd`/flutter/bin:$PATH
# export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
export PATH=~/flutter/flutter/bin:$PATH
前两行是临时镜像，第三行是临时环境变量，最终还是要更换成第五行，其中PATH_TO_FLUTTER_GIT_DIRECTORY要替换成flutter实际安装路径，我这里是~/flutter。
ps: 如果安装了Oh My Zsh，就在.zshrc文件最后添加如上环境变量，如果没有安装就在.bash_profile里配置。由于我安装了Oh My Zsh，所以我是在.zshrc里配置的，如下图：
配置环境变量
5.运行flutter doctor命令查看是否需要安装其它依赖项来完成安装：
flutter doctor
如果全部安装完毕如下图：
flutter doctor命令查看结果
如果有缺省的，执行flutter doctor命令后终端会给出错误的提示，根据提示的命令再逐步执行即可。
6.安装Android Studio，在设置中的Plugins中搜索安装Flutter和Dart插件，如下图：
Android Studio安装Flutter和Dart插件
7.使用Android Studio新建Flutter项目流程，如下图：
开始创建一个Flutter project
选择Flutter project模板
Flutter project参数设定
Flutter project项目
PS: 新建完Flutter项目后，运行Android模拟器会卡在Running Gradle task 'assembleDebug， 原因是因为Android模拟器需要使用Gradle， 而Gradle的Maven仓库在国外, 因此需要使用阿里云的镜像地址。修改镜像地址如下：
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
- 修改Flutter项目中android/build.gradle文件, 如下图：
修改Flutter项目中android/build.gradle文件
- 修改Flutter的配置文件, 该文件在
Flutter安装目录/packages/flutter_tools/gradle/flutter.gradle，如下图：
Flutter的配置文件位置
- 打开Flutter配置文件
flutter.gradle, 修改如下：
修改Flutter配置文件
8.使用VS Code开发Flutter项目：
- 用VS Code打开本地用Android Studio新建好的Flutter项目，如下图：
用VS Code打开本地用Android Studio新建好的Flutter项目
- 在VS Code里搜索安装
Flutter和Dart插件，如下图：
VS Code里搜索安装Flutter和Dart插件
- VS Code里进行模拟器调试步骤如下:
Debug
选择模拟器
- VS Code里Android和iOS模拟器调试效果如下图:
Android和iOS模拟器调试效果
到这里，开发Flutter项目的流程就介绍完了！
网友评论