flutter window 开发第一个项目

派大星jason
490 阅读7分钟

首先是安装和配置

官网（中文）：docs.flutter.cn/get-started…

下面的安装步骤都参考官网

（建议一步一步来）

下载 flutter sdk

flutter sdk 建议下载安装到非系统盘

  • 配置环境变量：安装完毕后，找到flutter的bin目录，配置环境变量，如下图

image.png

  • 配置国内镜像：环境变量——>系统变量——>新增两个变量，如下图

image.png

PUB_HOSTED_URL = https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn

更新 flutter sdk

先进入flutter sdk的目录中，在目录中打开cmd

查看当前flutter版本

flutter --version

输入命令查看当前源：

git remote -v

// github官方源：
origin  https://github.com/flutter/flutter.git (fetch)
origin  https://github.com/flutter/flutter.git (push)
// 国内源：清华源：
origin  https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk/flutter.git (fetch)
origin  https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk/flutter.git (push)

输入命令切换源：

git remote set-url '源地址'

例如：

// 切换为清华源
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk/flutter.git
// 切换为官方源
git remote set-url origin https://github.com/flutter/flutter.git

注意:目前国内已经不再提供远程源了，所以切换源是无效的。也就是说我们只能使用官方源，可能以后国内源会重新提供，所以切换方法先放在这里备用

更新版本：

在更新版本前需要说明：

  • 在官方的 channel 中无法直接指定版本号进行切换，只能始终跟随该通道的最新版本。
  • 如果你想使用某个特定版本（如 3.32.3），必须 git checkout 到该版本的 tag

更新方式一：

查看flutter可更新版本列表：docs.flutter.cn/install/arc…

// 方式一：直接更新到当前渠道的最新版本
flutter upgrade
// 方法二：更新到指定版本
1. 先拉取远程所有 tags
git fetch --all --tags
2. 切换到指定版本（例如：3.32.3）
git checkout 3.32.3

注意1：这种更新方式因为使用的源是官方源，所以有可能由于网络波动、被墙等等原因会更新失败，如果实在无法更新成功，那么请使用更新方式二

注意2：使用方法二更新到指定版本会导致：

  • 当前处于 “游离 HEAD” 状态（也就是你没有处在任何已命名的分支上）
  • 如果你想使用最新版本，使用flutter upgrade命令会报错：

image.png

意思是：你当前不是在 Flutter 的官方分支（channel）上，而是在“游离 HEAD”状态（即你通过 git checkout 到了某个 tag，如 3.32.3），所以 flutter upgrade 无法工作

解决方法：重新回到官方分支

flutter channel stable
flutter upgrade

更新方式二： 手动去下载你想要的flutter sdk版本，然后将下载的flutter sdk替换目前的flutter sdk（直接覆盖当前的）

安装VisUal Studio

VisUal Studio 建议下载安装到非系统盘

下载地址：visualstudio.microsoft.com/zh-hans/dow…

需要选择「使用 C++ 的桌面开发」，包括其所有默认组件，以安装必要的 C++ 工具链和 Windows SDK 的头文件。

安装Android Studio

Android Studio 建议下载安装到非系统盘

下载地址：developer.android.google.cn/studio?hl=z…

安装完成后建议先不要动，等前面2步全部完成后再开始配置

配置Android Studio

按照步骤配置Android Studio，如下图

  1. 选择自定义配置

image.png

  1. 配置SDK Manager（建议选择非系统盘）

image.png

  1. 配置 Android toolchain

image.png

image.png

  1. 安装插件

image.png

搜索flutter和dart 找到插件后安装，如下图

image.png

验证安装环境

打开命令行窗口使用 flutter doctor -v 命令 查看环境安装还有什么问题

image.png

如果和上图一样就代表没有问题了

一般按照上面的步骤全部完成后就是全✅了

如果不是全✅可以根据他给出的报错或警告信息进行修改，具体问题的解决方法自行搜索

可能遇到的问题

flutter识别不到Android SDK的位置

image.png

这个错误是：flutter识别不到我们的Android SDK的位置，我们需要运行下面的命令，手动告知一下flutter我们Android SDK的位置

flutter config --android-sdk <path_to_your_sdk>

Android 许可证没有被接受

image.png

这个提示说明你的 Android SDK 已经安装并配置好了，但 一些 Android 许可证没有被接受，这会阻止 Flutter 完成某些操作或构建 Android 应用。你需要接受这些许可证才能继续进行开发。

运行以下命令来接受 Android 的所有许可证：

flutter doctor --android-licenses

创建flutter项目

回到Android Studio按下图创建flutter项目

image.png

注意是new flutter product

image.png

这里注意一下红框的位置

  • 创建项目在左侧栏需要选中flutter
  • 第一次创建flutter项目，需要手动选择一下你的flutter sdk的位置

没问题就next

image.png

这里注意一下，platforms平台可以不用选择他默认的这么多平台，选择你需要开发的平台即可，当然了你全选也没影响

配置好你项目的名字和存放位置后点击create创建项目

image.png

创建好后就和上图一样了

运行项目时遇到的问题

程序启动时一直卡在Running Gradle task 'assembleDebug'...

image.png

这是因为：此时Gradle正在下载gradle构建工具以及相关依赖库，由于官方gradle默认配置的依赖下载服务器处于国外，国内用户访问非常缓慢，常常一个依赖下载就要花半天时间，好在国内有阿里、清华等镜像源，我们可以配置镜像代理加快依赖的下载

解决方法

解决方法一

找到gradle-wrapper.properties文件修改Gradle的下载服务器，如下图

image.png

Gradle的下载服务器

注意：替换镜像源时需要去镜像源地址查看一下是否有对应的版本

解决方法二

还是刚刚那个gradle-wrapper.properties文件

  1. 去官网下载对应的Gradle资源存放到本地
  2. 将distributionUrl的地址设置为本地资源地址，如下图

image.png

注意：

1.路径格式不要改动只需要改盘符和具体路径即可

2.Gradle资源一般是下载下图这两个，使用哪个自己测试，我只测了bin，all不确定是否可以

image.png

// 路径
file:///D:/gradle/gradle-8.12-bin.zip

Gradle 版本和java sdk的版本对应不上

在flutter项目中，如果gradle和javasdk的版本对应不上，运行项目时就会出现下图的错误

1740102643652.jpg

这个错误的意思是：Gradle 版本和java sdk的版本对应不上

比如上图的示例错误意思就是：当前 Flutter 和 Android Studio 均使用的是 Java 21（具体版本为 21.0.5），而你的项目 Gradle 版本（ gradle-7.6.3-all.zip）仅支持到 Java 17 或最高 Java 19，而不支持 Java 21

所以我们需要设置项目对应的java sdk版本

为什么设置项目的java sdk版本，而不是设置Gradle？

  1. Android studio创建的flutter项目中的gradle版本是根据你的flutter sdk的版本设置的最新稳定版本，最好不要去更改gradle的版本
  2. flutter只要一直在发展，那么flutter sdk 的版本就会一直更新，那么到了以后使用新版本的flutter sdk创建的项目对应的Gradle 版本就不一定是现在的java sdk版本了，所以我们灵活指定项目的java版本是最合理的

查看gradle版本

这时候我们先查看项目的gradle的版本，如下图

image.png

找到gradle的版本后，打开docs.gradle.org/current/use…

这个网站查看gradle对应的java版本

image.png

用上图的例子举例，gradle 7.6.3对应的是java19

安装gradle对应的java版本

我们再去adoptium.net/zh-CN/temur…

这个网站下载对应的java版本

image.png

可以选择语言，然后将筛选条件配置好，在搜索结果中选择 .msi或 .zip文件进行下载

推荐zip，因为我们可能多个项目需要用到多个不同版本的Javasdk，所以我们建一个专门的文件夹来管理flutter相关的javasdk，如下图

image.png

然后我们打开Windows 命令行（cmd）运行命令：

// 指定javasdk
flutter config --jdk-dir=D:\JavaSDK\javasdk19
// 还原默认javasdk
flutter config --jdk-dir=

成功设置会如下图：

image.png

然后我们可以运行flutter doctor -v命令检查 Flutter 是否成功识别了新的 JDK 目录，如下图：

image.png

可以看见我们的flutter已经使用了新的javasdk版本：javasdk19

Android Studio 中文汉化

我们先去plugins.jetbrains.com/plugin/1371…

这个网站下载中文插件，下载完成后我们在Android studio的插件页面安装中文插件，如下图

image.png

安装并重启Android studio后还是无效的，按下图设置

image.png

设置编译器的语言为中文，然后点击右下角的apply，重启后就会生效了

avatar
文章
阅读
粉丝