阅读 3646

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

零、前言

最近换了一台新的windows,把搭建Flutter&Windows应用的环境过程顺便记录分享一下。

Flutter对MacOS的支持还是非常好的,因为iOS和MacOS最终都是用XCode构建的,所以运行在Mac桌面上也轻而易举。

要让Flutter运行在Windows上,还是比较麻烦的,这也造成一定的门槛。这篇就来介绍一下如何支持Windows桌面程序。

我的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>[
      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() async{
  Directory tempDir = await getTemporaryDirectory();
  Directory appDir = await getApplicationSupportDirectory();
  Directory appDocDir = await getApplicationDocumentsDirectory();
  print('----getTemporaryDirectory-----${tempDir.path}------');
  print('----getApplicationSupportDirectory-----${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文件夹即可

你想要DIY修改iOS平台的代码,用XCode打开ios文件夹即可

你想要DIY修改MacOS平台的代码,用XCode打开macos文件夹即可

你想要DIY修改Windows平台的代码,用VS打开windows文件夹即可

每一个都是一个完整的项目,只是Flutter将它们牵连到了一起,用Dart赋予它们UI表现和操作。


3.标准结尾

欢迎加入编程技术交流圣地[-Flutter群-],一起交流。我想要营造一个分享Flutter技术、问题,平等交流的地方,绝非一个需求/新手答疑群
注1: 张口就需求的人勿扰;招聘、广告、内推勿扰;庸俗劣质言谈者勿扰。
注2: 提问前请准备好充分的描述及相关代码。
注3: 每周三,群里英文日,所有人需用英文交流。

@张风捷特烈 2020.07.03 未允禁转
我的公众号:编程之王
联系我--邮箱:1981462002@qq.com --微信:zdl1994328
~ END ~