【- Flutter 桌面篇 -】 FlutterUnit win版闪亮登场

零、前言

FlutterUnit是【张风捷特烈】长期维护的一个开源项目， 欢迎star ， 之前让FlutterUnit支持了MacOS： FlutterUnit mac版闪亮登场 前几天发了一篇尝鲜Windows的文章: Flutter&Windows应用尝鲜 大家可以在下面链接下载食用体验:

FlutterUnit.apk 下载

FlutterUnit mac版 下载

FlutterUnit win版 下载

• 【Android版FlutterUnit】: toly1994.com/file/Flutte…
• 【iOS版FlutterUnit - 自己下载项目运行】: github.com/toly1994328…
• 【MacOS版FlutterUnit】: toly1994.com/file/flutte…
• 【Windows版FlutterUnit】: toly1994.com/file/Flutte…

• 镇楼图

一、如何运行FlutterUnit windows

1.如果你只是想用

可以下载我打的包，然后运行FlutterUnit.exe即可 在我电脑上是可以运行的，别人电脑不知道怎么样

2. 如果需要运行FlutterUnit&Windows项目

• 确保你的Flutter&Windows开发环境，如果不知道，可见上篇: Flutter&Windows应用尝鲜
• 克隆 toly1994328/FlutterUnit 项目的flutter_unit_windows分支

• 获取依赖包: flutter pub get
• 运行命令: flutter run -d windows， 或直接通过AndroidStudio 选择设备运行

3. 如何打包项目

• 打包windows: flutter build windows,在build/windows/Build/Release中可以看到应用

二、关于FlutterUnit&Windows一些处理

1. Flutter&Windows 数据库的支持

pub插件地址： pub.flutter-io.cn/packages/mo… GitHub主页 : github.com/simolus3/mo… 至于怎么用的，本文就不说了，有兴趣的可以自己研究一下。

有一点需要注意的是，你需要自己将sqlite3.dll拷贝到项目根目录下才能使用。在打包之后也需要将sqlite3.dll拷贝到项目根目录。

2. 屏幕尺寸问题

根据官方桌面项目的处理，可以使用window_size插件

import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_unit_mac/views/app/bloc_wrapper.dart';
import 'views/app/flutter_app.dart';
import 'package:window_size/window_size.dart' as window_size;

void main() {

  WidgetsFlutterBinding.ensureInitialized();
  // 获取窗口信息，然后设置窗口信息
  window_size.getWindowInfo().then((window) {
    if (window.screen != null) {
      final screenFrame = window.screen.visibleFrame;
      final width = max((screenFrame.width / 2).roundToDouble(),1100.0);
      final height = max((screenFrame.height / 2).roundToDouble(), 850.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 Unit Windows');

      if (Platform.isMacOS) {
        window_size.setWindowMinSize(Size(800, 600));
        window_size.setWindowMaxSize(Size(1600, 1200));
      }
    }
  });
  runApp(BlocWrapper(child: FlutterApp()));
}

3. 待处理的其他问题

• 由于shared_preferences未支持windows,使用设置的储存被我注释了，即暂时无法保存配置

二、. FlutterUnit win 功能简述

由于桌面端录屏出的gif太大了，就不放动图了，所有功能同移动端 使用详情可参见: 【 FlutterUnit 食用指南】 开源篇

1. FlutterUnit主页界面

• 对于桌面来说，最麻烦的当属导航栏了，如果直接用底栏或顶栏，那会非常丑
• 通常需要左栏，当然这些对于动手能力超强的我，都是小菜。有就用，没有就造。
• 桌面程序一般都很宽,可以用GridView根据情况分多栏显示item,这样会好看些。

2. 左滑菜单栏

• 单击右侧导航栏底部的设置可以打开左侧的菜单
• 也可以通过左边滑来打开左侧的菜单，菜单内容保持一致，功能保持一致

3. 组件详情页

• 调整相关组件和介绍的位置，同排显示，好看一些。

• 由于Share插件还不支持windows,这里代码分享的功能直接改成代码复制。
• 代码面板的展开功能依旧存在,可通过展开按钮进行展开。

4.收藏集功能正常

• 收藏集的增删改查操作和移动端保持一致

5. 组件详情页的添加收藏

功能保持一致

6. 搜索页

• 模糊查询

• 星级查询

四.FlutterUnit近期更新

距离上一次统计已经一个多月了,由于这段时间比较忙，更新的不怎么频繁

1. 移动端支持显示性能浮层

.

.

.

2.增加Widget

CustomSingleChildLayout

CustomMultiChildLayout

LayoutId

LayoutBuilder

BackdropFilter

CupertinoSegmentedControl

LayoutBuilder

BackdropFilter

CupertinoSegmentedControl

AbsorbPointer

IgnorePointer

凑阵容

NestedScrollView

SliverOverlapInjector

SliverOverlapAbsorber

3.标准结尾

欢迎加入编程技术交流圣地[-Flutter群-]，一起交流。我想要营造一个分享Flutter技术、问题，平等交流的地方，绝非一个需求/新手答疑群。

注1: 张口就需求的人勿扰；招聘、广告、内推勿扰；庸俗劣质言谈者勿扰。

注2: 提问前请准备好充分的描述及相关代码。

注3: 每周三，群里英文日,所有人需用英文交流。