【Flutter 桌面篇】Flutter&Windows 应用尝鲜，flutter 框架缺点

• 目前稳定版不支持 Windows，我可以新建个文件夹，下载 master 分支的 Flutter

• 修改计算机的环境变量，指向 master 分支的 Flutter SDK

• 开启 Windows 支持: flutter config --enable-windows-desktop
  

• 创建 Flutter 项目, 建议命令行创建，比较方便。

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

---[· flutter --versionFlutter 1.20.0-3.0.pre.124 ? channel master ? https://github.com/flutter/flutter.gitFramework ? revision ec3368ae45 (17 hours ago) ? 2020-07-02 01:58:01 -0400Engine ? revision 65ac8be350Tools ? Dart 2.9.0 (build 2.9.0-20.0.dev f8ff12008e)

---[· flutter channelFlutter channels:

• masterdevbetastable

---[· 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文件选择插件

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

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

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)),));});},),

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