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 项目,如下图
![创建 Flutter 项目](https://img.haomeiwen.com/i1428991/a2aa858bcdd4e9c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/340 -
6、如果遇到许可证问题,在终端输入 flutter doctor --android-licenses 命令,输入 y 回车即可
许可证问题 -
7、配置安卓模拟器
-
7.1、打开 Android Virtual Devices Manager
配置安卓模拟器 -
7.2、选择模拟器型号,点击next
选择模拟器 -
7.3、选中一个点击 next 进行下载
-
7.4、点击 finnish 完成模拟器安装
-
7.5、点击红色框内的按钮运行模拟器
配置 VS Code
下载 VS Code2、安装 Flutter 插件
安装 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 编程之旅吧!!!
网友评论