1 下载Flutter SDK

3.38.7版本下载地址:storage.googleapis.com
可以从国内镜像站下载对应的版本:NJU

下载后,解压到本地文件夹中。

2 配置环境变量

将解压后的bin路径添加到Path中
在这里插入图片描述
验证环境变量配置:
终端执行

flutter --version
dart --version

可以看到版本信息,则环境变量配置完成
在这里插入图片描述

3 工具配置

如果需要生成安卓或者Windows平台的程序,还需要配置对应的工具。
执行flutter doctor检查本机环境配置

在这里插入图片描述
由于网络原因,Network Resources这一项也可能出现错误,可以忽略,不影响目标生成。
我这里提示缺少Android Studio和Visual Studio的一些配置,接下来逐个配置。

3.1 Android SDK工具配置

因为此前已经安装过Android Studio,所以在Android Studio中下载缺少的工具即可。打开设置,勾选安装Android SDK Command-line Tools (latest)即可

在这里插入图片描述
在这里插入图片描述

然后执行flutter doctor --android-licenses,按y回车,同意许可证。

再次执行flutter doctor检查本机环境配置,可以看到Android toolchain配置完成。
在这里插入图片描述

3.2 Visual Studio组件配置

如果没有安装Visual Studio Installer,可以从官网下载:适用于 Windows、Mac 和 Linux 的 Visual Studio 和 VS Code 下载
然后安装“使用C++的桌面开发”组件
在这里插入图片描述
安装完成后,所有环境配置检查通过
在这里插入图片描述

4 VS Code环境配置

4.1 安装扩展程序

在VS Code中安装flutter扩展程序即可,会自动安装Dart扩展程序
在这里插入图片描述

4.2 新建Flutter项目

按下快捷键ctrl+shift+p打开命令窗口,执行Flutter New Project
在这里插入图片描述
选择Application
在这里插入图片描述
然后选择项目保存位置。创建完成后,会自动打开项目。
在这里插入图片描述

4.3 启动程序

打开Flutter扩展界面,选择目标设备(这里选择的是Chrome),点击Run即可运行示例程序。
在这里插入图片描述

浏览器将显示一个计数器程序
在这里插入图片描述

如果安装了Visual Studio “使用C++的桌面开发”组件,也可以生成Windows程序
在这里插入图片描述

4.3.1 在安卓虚拟机运行

前提:Android Studio中配置了虚拟机。
在安卓虚拟机中运行,首先点击右下角选择设备,然后选择启动模拟器即可
在这里插入图片描述

等待项目编译完成,即可在虚拟机窗口看到运行结果。
在这里插入图片描述

5 使用 Android Studio 作为IDE

使用Android Studio作为IDE,代码补全功能比VS Code更加强大。
当然也可以使用其他支持的JetBrains IDE(Android Studio、IntelliJ IDEA Ultimate、GoLand、WebStorm),参见Dart官方文档

5.1 安装扩展程序

安装Flutter插件,还会自动安装Dart插件。
在这里插入图片描述

5.2 新建Flutter项目

打开Android Studio的欢迎页面,选择新建Flutter项目
在这里插入图片描述

选择Flutter SDK路径
在这里插入图片描述

配置项目名称和模块名称,设置需要的平台
在这里插入图片描述

项目创建完成,右边会显示Flutter插件面板
在这里插入图片描述

这时候打开面板可能会出现错误
在这里插入图片描述

点击Retry installation尝试安装,若还错误,可以更换网络环境再次尝试。安装完成后,可以正常显示扩展页面,如图

在这里插入图片描述

5.3 启动程序

选择对应平台即可。
Web
在这里插入图片描述

Windows
在这里插入图片描述

5.3.1 在安卓虚拟机运行

首先在Android Studio的device manager中启动虚拟机,然后就能在目标设备中选择对应虚拟机了
在这里插入图片描述
等待编译完成即可
在这里插入图片描述

附:安卓程序首次编译速度慢的解决方法

新项目首次编译需要下载gradle依赖,速度较慢,在版本不变的情况下,后续编译速度就很快了。玩过Android Studio原生安卓开发的应该都很熟悉了

解决方法:

  1. 打开项目中android/gradle/wrapper/gradle-wrapper.properties文件,记下gradle文件版本
    在这里插入图片描述
  2. 打开NJU Gradle镜像站,下载对应的压缩包文件
  3. 打开路径C:\Users\用户名\.gradle\wrapper\dists\gradle-版本\很长的字符,将压缩包放到该文件夹即可(无需解压)
    在这里插入图片描述

参考
Install Flutter manually
Set up and test drive Flutter

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐