Flutter系列笔记-1:Flutter开发环境搭建

760 阅读3分钟

什么是Flutter

Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。

本文以Win10电脑、开发安卓为例搭建Flutter开发环境

本文假设你是一个安卓开发人员,电脑上已经安装了完整的安卓开发环境,可以正常编写安卓代码并编译运行安卓apk(包括Java开发环境,AndroidStudio,Android SDK,Git for Window)

1.下载 Flutter SDK

Flutter SDK for window

Flutter SDK for macos

Flutter SDK for linux

2.解压下载到的压缩包

以window为例,下载好的压缩包为 flutter_windows_v1.12.13+hotfix.5-stable.zip (可能随着官方更新版本会不一样)

解压到相应目录

如 E:\flutter

解压后目录如下图所示

flutter sdk dir

3.配置环境变量

把第二步的解压后的 flutter 目录下的 flutter\bindart-sdk\bin 添加到系统变量的Path下

如果解压到 E:\flutter 则把 E:\flutter\binE:\flutter\bin\cache\dart-sdk\bin 添加到系统变量的Path下

添加后如下图所示

flutter env config

如果你在国内使用 Flutter,那么你可能需要找一个与官方同步的可信的镜像站点,帮助你的 Flutter 命令行工具到该镜像站点下载其所需的资源。 你需要为此设置两个环境变量: PUB_HOSTED_URLFLUTTER_STORAGE_BASE_URL,然后再运行 Flutter 命令行工具,查看设置教程。

Flutter 社区
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn

清华大学 TUNA 协会
FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub

添加 FLUTTER_STORAGE_BASE_URLPUB_HOSTED_URL环境变量,和Path环境变量同级,不要添加到Path里 添加后如下图所示

FLUTTER_STORAGE_BASE_URL

PUB_HOSTED_URL

添加完上面的环境变量后,在命令行窗口运行flutter --versiondart --version 命令,测试环境变量是否配置成功,如果成功,会有相应版本信息输出

4.配置Android Studio

1.下载 Flutter 插件

File -> Settings -> Plugins 搜索 Flutter,安装插件,重启AndroidStudio,Flutter插件安装完成后,会把Dart插件也一起安装好 安装后如下图所示

Flutter plugin

2.设置Dart SDK路径 File -> Settings -> Languages & Frameworks->Dart 设置相应路径并且点击Apply保存

设置完成后,如下图所示

dart sdk path

3.设置Flutter SDK路径 File -> Settings -> Languages & Frameworks->Flutter 设置相应路径并且点击Apply保存

设置完成后,如下图所示

flutter sdk path

5.检查Android Studio Flutter开发环境是否配置好

运行 flutter doctor 输出如下信息代表环境已经搭建成功

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.17134.1099], locale zh-CN)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[!] IntelliJ IDEA Community Edition (version 2019.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
[√] Connected device (1 available)

! Doctor found issues in 1 category.

6.升级Flutter SDK

运行 flutter upgrade 升级 这个升级过程是自动的。

如果运行 flutter upgrade 命令升级失败,可以把 第二步的 2.解压下载到的压缩包 解压出来的文件夹从电脑上删除,重新在第一步 1.下载 Flutter SDK 的地址下载最新的sdk包,重新解压到第二步 2.解压下载到的压缩包 里的相应目录下即可

7.注意事项

Flutter SDK自带对应版本的Dart SDk,它们是配套使用的,某个Flutter SDK版本并不能使用任意的DartSDK版本,所以 3.配置环境变量 4.配置Android Studio 第3.第4步的Flutter SDK和Dart SDk都得指向第二步 2.解压下载到的压缩包 解压出来的flutter\bindart-sdk\bin,否则可能会有些意想不到的异常。

8.安装IDEA社区版练习Dart语言

IDEA for Window

只需要安装Dart插件,配置Dart SDK路径

配置和第4步 4.配置Android Studio 一样

9. 安装安卓模拟器

genymotion