初探Flutter Windows应用及插件
一、环境搭建
1. 配置国内镜像源
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
PUB_HOSTED_URL https://pub.flutter-io.cn
2. 下载FlutterSDK
目前稳定版本不支持windows应用,所以我们必须拉取最新的Flutter版本。
a. 如果电脑里已经安装了Flutter Stable版本,可以直接执行以下命令切换到主线版本:
flutter channel master
flutter 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这方面会做得越来越好。