写点什么

【Flutter 桌面篇】Flutter&Windows 应用尝鲜

用户头像
Android架构
关注
发布于: 2021 年 11 月 07 日
1.运行官方桌面示例

Github 上 google 的flutter-desktop-embedding是官方的桌面支持项目,

里面有很多官方提供的实用插件,可以下载看看。


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



如果上面的 main.dart 有个×,八成是 SDK 没有配置好,可以在Settings...-->Languaes &Frameworks-->Flutter面板配置



可以看出这个项目引用了很多本地的插件,这些插件是目前桌面开发很宝贵的资源。

flutter pub get之后,就可以运行示例项目了



如果你的电脑没有在开发者模式,使用插件会出错。 你可以在设置-->更新和安全-->开发者选项里设置

Building with plugins requires symlink support. Please enable Developer Mode in your system settings



然后运行即可,项目运行效果如下:




2. 示例项目的几个插件
  • window_size屏幕尺寸插件


这个插件非常有用,桌面不同于手机。有窗口的概念,所以定义程序的窗口大小非常必要。


import 'package:window_size/window_size.dart' as window_size;


void main() {// Try to resize and reposition the window to be half the width and height// of its screen, centered horizontally and shifted up from center.WidgetsFlutterBinding.ensureInitialized();// 获取窗口信息,然后设置窗口信息 window_size.getWindowInfo().then((window) {if (window.screen != null) {final screenFrame = window.screen.visibleFrame;final width = math.max((screenFrame.width / 2).roundToDouble(), 800.0);final height = math.max((screenFrame.height / 2).roundToDouble(), 600.0);final left = ((screenFrame.width - width) / 2).roundToDouble();final top = ((screenFrame.height - height) / 3).roundToDouble();final frame = Rect.fromLTWH(left, top, width, height);//设置窗口信息 window_size.setWindowFrame(frame);//设置窗口顶部标题 window_size.setWindowTitle('Flutter Testbed on ${Platform.operatingSystem}');


if (Platform.isMacOS) {window_size.setWindowMinSize(Size(800, 600));window_size.setWindowMaxSize(Size(1600, 1200));}}});


runApp(new MyApp());}




  • color_panel颜色选择插件


External Libraries#Flutter Plugin中 你可以看到插件信息,可以看到 color_panel插件没有支持 Windows。

在点击左上角选择颜色时,并没有额外处理,所以会报错,这不太好。应该可以给个提示什么的。






  • file_chooser文件选择插件


非常实用的插件,支持打开文件选择面板文件保存面板



FlatButton(child: const Text('OPEN'),onPressed: () async {String initialDirectory;if (Platform.isMacOS || Platform.isWindows) {initialDirectory =(await getApplicationDocumentsDirectory()).path;}//打开文件选择面板 final result = await showOpenPanel(allowsMultipleSelection: true,initialDirectory: initialDirectory);Scaffold.of(context).showSnackBar(SnackBar(content: Text(_resultTextForFileChooserOperation(_FileChooserType.open, result))));},)



FlatButton(child: const Text('SAVE'),onPressed: () {//打开文件保存面板 showSavePanel(suggestedFileName: 'save_test.txt').then((result) {Scaffold.of(context).showSnackBar(SnackBar(content: Text(_resultTextForFileChooserOperation(_FileChooserType.save, result)),));});},),


除此之外,还可以指定过滤类型


FlatButton(child: const Text('OPEN MEDIA'),onPressed: () async {final result =await showOpenPanel(allowedFileTypes: <FileTypeFilterGroup>[FileTypeFilterGroup(label: 'Images', fileExtensions: <String>['bmp','gif','jpeg','jpg','png','tiff','webp',]),FileTypeFilterGroup(label: 'Video', fileExtensions: <String>['avi','mov','mpeg','mpg','webm',]),]);Scaffold.of(context).showSnackBar(SnackBar(content: Text(_resultTextForFileChooserOperation(_FileChooserType.open, result))));},),




  • url_launcher、url_launcher_fde 插件


你会看到一些有fde结尾的 插件,它们在plugins\flutter_plugins里,包里面有 windows 支持。

使用的方式和之前一样,url_launcher 主要用于一些链接的跳转。




FlatButton(child: const Text('OPEN ON GITHUB'),onPressed: () {url_launcher.launch('https://github.com/google/flutter-desktop-embedding');},),




  • path_provider、path_provider_fde 插件


用于获取文件夹,这个非常有用。



void _showDir


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


() async{Directory tempDir = await getTemporaryDirectory();Directory appDir = await getApplicationSupportDirectory();Directory appDocDir = await getApplicationDocumentsDirectory();print('----getTemporaryDirectory-----{appDir.path}------');print('----getApplicationDocumentsDirectory-----${appDocDir.path}------');}



三、尾声

1. 说一下 package 和 plugin 的区别:

Flutter 对于平台级的包是 plugin,比如主要是和平台相关的功能,如path_provider、sqlfilte,

用纯 Dart 的开发的包是 package,这和平台无关,可以跨平台使用,比如bloc、provider、flutter_star



目前 plugin 支持 Windows 的不多,支持 Windows 的 sqlite 数据库插件可以用moor_ffi




2. 关于 Windows 项目:

一直觉得 Flutter 只是个中介者,每个平台的项目都是独立的。

并非是One For All(一者承担所有),而是All By One(所有的都可以做),比如

你想要DIY修改Android平台的代码,用AndroidStudio打开android文件夹即可

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
【Flutter桌面篇】Flutter&Windows应用尝鲜