Flutter 环境配置
配置环境变量
- 1、打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同
- 2、加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径
# 国内用户需要设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
# 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# 设置flutter的路径
export PATH=~/Documents/flutter/bin:$PATH
注意:PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径,比如“~/Documents/flutter”
export PATH=~~/Documents/flutter/bin:$PATH
- 3、运行 source $HOME/.bash_profile 刷新当前终端窗口
- 4、通过运行flutter/bin命令验证目录是否在已经在PATH中:
echo $PATH
- 5、运行 flutter doctor 命令查看是否需要安装其它依赖项来完成安装:
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, set
ANDROID_SDK_ROOT to that location.
You may also want to add it to your PATH environment variable.
该情况是未安装 Android Studio,请先安装 Android Studio
[!] Android Studio (version 3.6)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
该情况是因为 android studio 里还少了两个插件。我们打开 andriod studio。
- 5.1、打开 preferences
- 5.2、找到 Plugins,搜索 flutter
- 5.3、有弹框提示要安装dart,同意。等安装好后重启andriod studio。
[!] VS Code (version 1.45.1)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
该情况是在 vscode 中未配置 flutter 插件,搜索 flutter 和 Dart 插件安装
配置编辑器
一般编写 Flutter 可以使用 Android Studio 和 Visual Studio Code,Flutter官网配置编辑器教程
配置 Android Studio
-
下载Android Studio
-
2、配置SDK
下载安装好 Android Studio 后,首次打开会提醒你安装 SDK。当我们安装好 SDK 后,打开 Android Studio -
3、【command + ,】,进入偏好设置,如下图:
偏好设置
-
4、安装 Android Studio 的 Flutter 插件,安装的时候会跳出安装 Dart 的插件,点击 YES 进行安装,如下图:
安装 Flutter 插件
-
5、安装好插件后,重启 Android Studio,然后创建 Flutter 项目,如下图

配置 VS Code

2、安装 Flutter 插件

3、通过 Flutter Doctor 验证您的设置

运行项目
Android Studio 运行项目
- 1、创建 Flutter 项目

-
2、选择 Flutter Application,点击 next,如下图:
-
3、设置项目名称(例如:flutter_demo,不要使用驼峰命名,使用下划线命名)
-
4、配置包名
-
5、运行项目
-
6、运行效果
安卓运行效果图

VS Code 运行项目
- 1、启动 VS Code
-
2、调用 View -> Command Palette,或者按快捷键 command + shift + P
-
3、输入 flutter,然后选择“Flutter: New Project” 选项
-
4、输入项目名称(如:hello_word),然后按回车键
-
5、指定项目的目录,然后点击蓝色确定按钮
- 6、等待项目创建,并显示 main.dart 文件
-
7、选择模拟器
选择模拟器
-
8、运行项目,选择菜单栏中的 Run -> Start Debugging,或者按 F5,如下图
以上就是 Flutter 配置环境的整个流程,下面开始我们的 Flutter 编程之旅吧!!!
网友评论