vlambda博客
学习文章列表

前言

最近换了一台新的windows，把搭建Flutter&Windows应用的环境过程顺便记录分享一下。Flutter对MacOS的支持还是非常好的，因为iOS和MacOS最终都是用XCode构建的，所以运行在Mac桌面上也轻而易举。要让Flutter运行在Windows上，还是比较麻烦的，这也造成一定的门槛。这篇就来介绍一下如何支持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应用编译需要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>[
    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))));
},
),