vlambda博客
学习文章列表

初探Flutter Windows应用及插件

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

初探Flutter Windows应用及插件


2. 下载FlutterSDK

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

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

flutter channel masterflutter upgrade

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

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

初探Flutter Windows应用及插件


3. 配置 Windows应用支持

1> 设置环境变量

ENABLE_FLUTTER_DESKTOP = true

初探Flutter Windows应用及插件


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

flutter config --enable-windows-desktop flutter devices

初探Flutter Windows应用及插件

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


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

初探Flutter Windows应用及插件


4> 终端运行flutter doctor

初探Flutter Windows应用及插件

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

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

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

初探Flutter Windows应用及插件

安装完之后,再次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 getflutter run

初探Flutter Windows应用及插件

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

初探Flutter Windows应用及插件

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


2. 创建自己的Flutter Windows应用

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

初探Flutter Windows应用及插件


直接运行:

初探Flutter Windows应用及插件

是不是找到了我们当初编写移动平台的第一个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 为插件名

初探Flutter Windows应用及插件


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


初探Flutter Windows应用及插件


运行插件下的example/main

初探Flutter Windows应用及插件


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

初探Flutter Windows应用及插件

初探Flutter Windows应用及插件

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


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

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

初探Flutter Windows应用及插件

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

初探Flutter Windows应用及插件

其中需要添加头文件

初探Flutter Windows应用及插件

以及辅助方法:


4. 运行

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

flutter-desktop-embedding\plugins\flutter_plugins\path_provider_fde


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