【- 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: 每週三，群裡英文日,所有人需用英文交流。

@張風捷特烈 2020.07.09 未允禁轉
我的公眾號:程式設計之王
聯絡我--郵箱:1981462002@qq.com --微信:zdl1994328
~ END ~