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

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’,
‘webm’,
]),
]);
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(_resultTextForFileChooserOperation(
_FileChooserType.open, result))));
},
),

---

• url_launcher、url_launcher_fde 插件

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

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

如果你进阶的路上缺乏方向，可以加入我们的圈子和安卓开发者们一起学习交流！

• Android进阶学习全套手册

  

• Android对标阿里P7学习视频

  

• BATJ大厂Android高频面试题

  

最后，借用我最喜欢的乔布斯语录，作为本文的结尾：

人这一辈子没法做太多的事情，所以每一件都要做得精彩绝伦。
你的时间有限，所以不要为别人而活。不要被教条所限，不要活在别人的观念里。不要让别人的意见左右自己内心的声音。
最重要的是，勇敢的去追随自己的心灵和直觉，只有自己的心灵和直觉才知道你自己的真实想法，其他一切都是次要。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
为本文的结尾：

人这一辈子没法做太多的事情，所以每一件都要做得精彩绝伦。
你的时间有限，所以不要为别人而活。不要被教条所限，不要活在别人的观念里。不要让别人的意见左右自己内心的声音。
最重要的是，勇敢的去追随自己的心灵和直觉，只有自己的心灵和直觉才知道你自己的真实想法，其他一切都是次要。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！