前言

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

1. 开发环境搭建

1.1 基础开发环境

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

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

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

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

也可参考文档配置。

1.2 安卓环境搭建

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

安装 Jdk，做 Java 开发都会这个，此处不再赘述；
安装 Android Studio，Java 开发的宇宙 IDE 当然非 IDEA 莫属了，此处默认已经安装了 IDEA。而安装 JetBrains 家族的开发工具，最便捷的方式自然是安装 JetBrains Toolbox，在其中也可以下载到 Android Studio；
然后打开 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命令检查可能会有一些项不通过：

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

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

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

1
2
3

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 的地址，此时需要设置：

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

同意安卓协议：

1	flutter doctor --android-licenses

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

Visual Studio - develop for Windows

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

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

Unable to find bundled Java version

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

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

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

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

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

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

在前面安装完 Android Studio 后，打开插件市场下载Dart及Flutter插件，安装完成后需要重启 Android Studio。

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

注意选择 FLutter 的 SDK 路径。

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

完成创建后如下所示。

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

选择在此窗口打开。

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

完成之后，打开 SDK 管理

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

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

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

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

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

注意 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可全平台打包。

Flutter 初体验(Windows 11)

前言