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

我的FlutterUnit开源项目正在进行windows端的调整适配。主要是数据库支持方面的调整(sqlflite目前不支持windows)


一、运行Flutter初始项目
1.FlutterSDK桌面程序创建
  • 目前稳定版不支持Windows,我可以新建个文件夹,下载master分支的Flutter
  • 修改计算机的环境变量,指向master分支的Flutter SDK
  • 开启Windows支持: flutter config --enable-windows-desktop
  • 创建Flutter项目, 建议命令行创建,比较方便。

—[· git clone -b master https://github.com/flutter/flutter.git

—[· flutter --version
Flutter 1.20.0-3.0.pre.124 • channel master • https://github.com/flutter/flutter.git
Framework • revision ec3368ae45 (17 hours ago) • 2020-07-02 01:58:01 -0400
Engine • revision 65ac8be350
Tools • Dart 2.9.0 (build 2.9.0-20.0.dev f8ff12008e)

—[· flutter channel
Flutter channels:

  • master
    dev
    beta
    stable

—[· flutter config --enable-windows-desktop
—[· E:
—[· cd Projects\Flutter\Desk
—[· flutter create toly_flutter

  • 你可以看到有windows的目录,这里面就是Windows应用的工程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


2. 运行Flutter的Windows项目

开启windows支持后,重启AS后,会有下面的下拉选项

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

直接运行可能会出错,因为Windows应用编译需要Visual Studio工具,就像MacOS需要Xcode一样

可以执行一下flutter doctor看看情况

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


3.安装 VisualStudio

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下载完后,flutter doctor时,如下。之后就可以运行了。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


二、官方桌面项目和一些桌面插件
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(label: ‘Images’, fileExtensions: [
‘bmp’,
‘gif’,
‘jpeg’,
‘jpg’,
‘png’,
‘tiff’,
‘webp’,
]),
FileTypeFilterGroup(label: ‘Video’, fileExtensions: [
‘avi’,
‘mov’,
‘mpeg’,
‘mpg’,

最后

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门**

如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值