初探Flutter Windows应用及插件

Posted 2021-04-29 全栈工程师在路上

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。 就目前而言，Flutter被大部分开发者用来开发移动端android/ios，而桌面平台尤其是Windows平台还处于不稳定阶段 .  因兴趣使然，今天我们就来试试Flutter Windows应用。

一、环境搭建

    

1. 配置国内镜像源

FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cnPUB_HOSTED_URL https://pub.flutter-io.cn

2. 下载FlutterSDK

目前稳定版本不支持windows应用，所以我们必须拉取最新的Flutter版本。

a. 如果电脑里已经安装了Flutter Stable版本，可以直接执行以下命令切换到主线版本：

flutter channel masterflutter upgrade

b.如果电脑里还未安装过Flutter SDK,可以直接去官网下载最新主线版本Github: https://github.com/flutter/flutter

下载完成后，注意配置Flutter的环境变量

3. 配置 Windows应用支持

1> 设置环境变量

ENABLE_FLUTTER_DESKTOP = true

2> 终端(Powershell)执行以下命令

flutter config --enable-windows-desktop flutter devices

可以看到已经支持Windows (desktop)设备

3> 类似Android移动开发，桌面版我们也需要打开开发者模式

4> 终端运行flutter doctor

如果Visual Studio未安裝，需安装Visual Studio.下载社区版本即可

官网：https://visualstudio.microsoft.com/zh-hans/ 

安装时务必将工作负载中与桌面开发相关的全选。

安装完之后，再次flutter doctor可以看到Visual Studio已正确安装。

二、开始Flutter Windows应用

1.Flutter Windows官方Demo

下载flutter-desktop-embedding并保存在flutter SDK同一级目录

git clone https://github.com/google/flutter-desktop-embedding.git

下载完成后，进入到testbed目录，执行flutter pub get和flutter run

以下就是成功运行后的Demo testbed windows 应用 

我们再回过头来看一下flutter-destop-embedding目录下的plugins目录，里面包括了目前所支持的windows下的官方插件，而官方的Demo里面对这些插件都有个大致的使用。

2. 创建自己的Flutter Windows应用

通过前面的环境搭建，此时我们已经可以直接像创建移动应用一样创建一个flutter windows桌面应用，创建完成之后，工程目录会比我们平时使用的稳定版本多出一个windows目录 ，此目录就是与windows相关的代码文件目录， 而且运行设备会多出一个WINDOWS (DESKTOP)选项，

直接运行：

是不是找到了我们当初编写移动平台的第一个Demo的感觉。

三、自定义Flutter Windows插件

至此，我们已经可以开始编写大多数简单的UI代码了，但若涉及到平台相关的功能比如说简单的音频播放，目前官方还不支持或者说还未提供相关插件(所有官方提供的插件详见flutter-destop-embedding/plugins)。以下开始介绍如何编写一个简单的wav音频播放插件。

1. 终端命令创建插件工程

flutter create --platforms windows --org com.example.audioplayer --template=plugin audio_player --org 参数为插件包名--最后audio_player 为插件名

2. 创建完之后用android studio/vs code打开插件工程

运行插件下的example/main

插件已为我们写好了一个示例，即获取平台版本信息。

当在example/main.dart调用AudioPlayer-platformVersion方法时，会调用到audio_player_plugin.cpp方法，这就是写插件原生方法的地方。接下来我们尝试编写一个属于自己的原生方法。

3. 简单的wav格式音频播放接口

1> 在插件lib目录下(audio_player.dart)添加Flutter中间调用接口：

2> 在插件windows目录下(audio_player_plugin.cpp)添加原生方法:

其中需要添加头文件

以及辅助方法：

4. 运行

点击play按钮就可以听到指定目录下的wav音频啦。如果大家需要播放项目指定音频文件，可以使用path_provider_fde插件来解决路径问题。

flutter-desktop-embedding\plugins\flutter_plugins\path_provider_fde

至此，我们已经完成了最简单的Flutter Windows下的Demo展示，并进一步编写出自定义插件。虽然当前Flutter Windows目前还不稳定，很多功能还不完善，但是这种跨平台给我们提供非常高效的开发方式，相信以后Flutter这方面会做得越来越好。