阅读 7009

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

零、前言

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

FlutterUnit.apk 下载 FlutterUnit mac版 下载 FlutterUnit win版 下载

  • 镇楼图

一、如何运行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: 每周三,群里英文日,所有人需用英文交流。

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