跳至主要內容

Flutter 初体验(Windows 11)

Mayee...大约 7 分钟

前言

在体验过 Uniapp 之后,想尝试 Flutter,它可以开发移动端和桌面端。 Flutter 的语法是基于 Dart 的,所以需要先会 Dart 语法。会 Java 的同学上手 Dart 是非常快的,因为 Dart 语法和关键字以及特性有 8 成和 Java 是一模一样的,另外 1 成是有点 Nodejs/Python/Go 的特点,还有 1 成是 Dart 本身的特性。

1. 开发环境搭建

1.1 基础开发环境

如果仅仅是使用 Dart 做开发,那么配置 Dart 开发环境就可以了。下载open in new window 安装非常简单,将下载好的 zip 压缩文件解压至合适的位置,然后在环境变量的 path 中配置 %DART_HOME\bin 的路径即可。

但这里我们的目的是使用 Flutter 做开发,因此下载 Flutter 即可,Flutter 的 Sdk 中包含了完整的 Dart,下载后得到的也是一个 zip 压缩包。官方下载open in new window国内下载open in new window。 下载完成后,解压至合适目录,然后在环境变量的 path 中配置 %FLUTTER_HOME\bin 的路径即可。

Flutter 自带包管理器,但是服务器在国外,国内加速下载就需要配置镜像源,配置方式很简单,在环境变量中加上如下两个配置即可:

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

也可参考文档open in new window配置。

1.2 安卓环境搭建

上面步骤完成后,即完成了 flutter 环境配置,但要进行安卓开发还有一些必要的步骤。

  1. 安装 Jdk,做 Java 开发都会这个,此处不再赘述;
  2. 安装 Android Studio,Java 开发的宇宙 IDE 当然非 IDEA 莫属了,此处默认已经安装了 IDEA。而安装 JetBrains 家族的开发工具,最便捷的方式自然是安装 JetBrains Toolbox,在其中也可以下载到 Android Studio;
  3. 然后打开 Android Studio,会提示需要安装安卓 SDK,选择一个合适的目录安装既可。

此时,前置条件基本都准备好了,在命令行中运行flutter doctor命令检查环境配置,全部配置正常则输出如下:

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel master, 3.9.0-22.0.pre.28, on Microsoft Windows [版本 10.0.22621.1485], locale zh-CN)
[] Windows Version (Installed version of Windows is version 10 or higher)
[] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[] Chrome - develop for the web
[] Visual Studio - develop for Windows (Visual Studio Community 2022 17.5.3)
[] Android Studio (version 2022.1)
[] IntelliJ IDEA Ultimate Edition (version 2022.3)
[] Connected device (3 available)
[] Network resources

前面打则表示检查通过,不通过的项会打×

1.3 常见环境问题

上一步中运行flutter doctor命令检查可能会有一些项不通过: 01_1

根据自己的实际情况,对照下面的解决方式,那些项不通过就解决哪些,不必全部执行。

Windows Version (Installed version of Windows is version 10 or higher)

Flutter 开发环境要求 Windows 10 及以上的版本,若此项不通过则表示它检测不到当前是什么版本,依次执行如下命令即可解决:

flutter channel
flutter channel master
flutter upgrade

Android toolchain - develop for Android devices (Android SDK version 33.0.2)

Flutter 要求安装安卓开发工具链。

Unable to locate Android SDK

Flutter 找不到安卓 SDK 的地址,此时需要设置:

flutter config --android-sdk <SDK绝对地址>

同意安卓协议:

flutter doctor --android-licenses

控制台会连续输出一堆内容,问你选择(Y/N)?,全部选择 Y 即可。

Visual Studio - develop for Windows

这一项是开发 Windows 桌面应用必须的,如果不打算开发 Windows 桌面应用,那么也可以忽略这个问题。解决方式就是安装Visual Studio下载地址open in new window,选择免费的社区版(Community)即可。安装步骤如下: 01_101_1

只勾选图中所示,其余的可以不用勾选。

Unable to find bundled Java version

将Android Studio安装目录下的jre文件,替换为jdk的jre文件

确保Flutter定位到安装的Android Studio位置

flutter config --android-studio-dir <android studio安装的绝对地址>

未通过检查的必要项都解决完后,可再次运行flutter doctor命令检查。

2. 创建 Flutter 项目&真机调试

接下来将介绍 flutter 项目创建及真机调试,保姆级教程。

在前面安装完 Android Studio 后,打开插件市场下载DartFlutter插件,安装完成后需要重启 Android Studio。

01_2_01
01_2_01

重新打开 Android Studio 后,点击New Flutter Project创建 Flutter 工程。

01_2_02
01_2_02

注意选择 FLutter 的 SDK 路径。

01_2_03
01_2_03

为工程起个名,注意单词之间只能用下划线连接。 Android language / iOS language 保持默认即可。 Organization 为包名,跟 Java 开发的包名类似。 Platform 表示打包的平台:Android(移动端)、iOS(移动端)、Linux(桌面端)、MacOS(桌面端)、Web(网页端)、Windows(桌面端)。根据需要勾选即可。

01_2_04
01_2_04

完成创建后如下所示。

01_2_05
01_2_05

因为这里是用安卓演示,所以需要再次打开安卓项目。

01_2_0601_2_07

选择在此窗口打开。

01_2_08
01_2_08

首次打开会需要下载 gradle,如果之前没有安装 gradle 的话。由于 gradle 服务器在国外,自动下载的过程中可能出现超时,此时可点击Sync Project with Gradle Files,如果多次失败则需要使用魔法了,或者百度解决。

01_2_09
01_2_09

完成之后,打开 SDK 管理

01_2_10
01_2_10

选择自己手机匹配的安卓系统版本。我的手机是安卓 13,因此这里选择安装的是 Android 13。

01_2_11
01_2_11

之后打开自己手机的开发者选项,开启 USB 调试及 USB 安装应用,并将手机连接至电脑。注意,如果电脑上安装了手机应用助手、应用宝、HbuilderX 等会占用 ADB 指定的应用,需要关闭。

之后可以通过 Device Manager 查看已连接的设备。

01_2_13
01_2_13

此时可以看到我的物理安卓设备,安卓版本为 13。

01_2_14
01_2_14

然后点击 Run app 即可自动打包并发送至手机安装。

01_2_15
01_2_15

注意 app 第一次需要手动允许安装,在已安装的情况下,后续可以自动安装。

可以看到应用已安装。

打开体验 flutter 应用。

3. flutter 命令

上面查看已连接的设备也可以用flutter devices命令看到物理机设备,输出如下:

PS C:\Users\maye> flutter devices
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
4 connected devices:

2201122C (mobile) • b1c6b1e5 • android-arm64  • Android 13 (API 33)
Windows (desktop) • windows  • windows-x64    • Microsoft Windows [版本 10.0.22621.1485]
Chrome (web)      • chrome   • web-javascript • Google Chrome 110.0.5481.178
Edge (web)        • edge     • web-javascript • Microsoft Edge 111.0.1661.54

打包应用并发送至手机运行也可使用flutter run命令,需要在工程目录下执行,输出如下:

PS C:\Users\maye> cd C:\Workspace\Flutter\flutter_demo
PS C:\Workspace\Flutter\demo> flutter run
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Web SDK...                                             10.8s
Downloading windows-x64-debug/windows-x64-flutter tools...         11.4s
Downloading windows-x64/flutter-cpp-client-wrapper tools...        136ms
Downloading windows-x64-profile/windows-x64-flutter tools...         9.9s
Downloading windows-x64-release/windows-x64-flutter tools...         9.0s
Launching lib\main.dart on 2201122C in debug mode...
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Running Gradle task 'assembleDebug'...                             22.5s
√  Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app-debug.apk...           3.0s
Syncing files to device 2201122C...                                 70ms

Flutter run key commands.
r Hot reload.
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

A Dart VM Service on 2201122C is available at: http://127.0.0.1:3476/J-jbROmHz50=/
The Flutter DevTools debugger and profiler on 2201122C is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:3476/J-jbROmHz50=/
E/libEGL  (23127): pre_cache appList: com.sina.weibo,com.ss.android.article.news,com.taobao.taobao,com.smile.gifmaker,com.ss.android.ugc.aweme,com.tencent.mm,tv.danmaku.bili,
D/com.mayee.demo(23127): MiuiProcessManagerServiceStub setSchedFifo
I/MiuiProcessManagerImpl(23127): setSchedFifo pid:23127, mode:3
W/Parcel  (23127): Expecting binder but got null!
I/HandWritingStubImpl(23127): refreshLastKeyboardType: 1
I/HandWritingStubImpl(23127): getCurrentKeyboardType: 1
I/HandWritingStubImpl(23127): isKeyboardTypeChanged: false
I/HandWritingStubImpl(23127): isKeyboardTypeChanged: false
I/HandWritingStubImpl(23127): getCurrentKeyboardType: 1
I/com.mayee.demo(23127): This is non sticky GC, maxfree is 8388608 minfree is 2097152

使用flutter run -d all可全平台打包。