【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

張風捷特烈發表於2020-07-09

零、前言

FlutterUnit【張風捷特烈】長期維護的一個開源專案, 歡迎star
之前讓FlutterUnit支援了MacOSFlutterUnit mac版閃亮登場
前幾天發了一篇嚐鮮Windows的文章: Flutter&Windows應用嚐鮮
大家可以在下面連結下載食用體驗:

FlutterUnit.apk 下載 FlutterUnit mac版 下載 FlutterUnit win版 下載
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

  • 鎮樓圖
    【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

一、如何執行FlutterUnit windows

1.如果你只是想用

可以下載我打的包,然後執行FlutterUnit.exe即可
在我電腦上是可以執行的,別人電腦不知道怎麼樣

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


2. 如果需要執行FlutterUnit&Windows專案
  • 確保你的Flutter&Windows開發環境,如果不知道,可見上篇: Flutter&Windows應用嚐鮮
  • 克隆 toly1994328/FlutterUnit 專案的flutter_unit_windows分支

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

  • 獲取依賴包: flutter pub get
  • 執行命令: flutter run -d windows, 或直接通過AndroidStudio 選擇裝置執行

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


3. 如何打包專案
  • 打包windows: flutter build windows,在build/windows/Build/Release中可以看到應用

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


二、關於FlutterUnit&Windows一些處理

1. Flutter&Windows 資料庫的支援

pub外掛地址: pub.flutter-io.cn/packages/mo…
GitHub主頁 : github.com/simolus3/mo…
至於怎麼用的,本文就不說了,有興趣的可以自己研究一下。

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

有一點需要注意的是,你需要自己將sqlite3.dll拷貝到專案根目錄下才能使用。在打包之後也需要將sqlite3.dll拷貝到專案根目錄。

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


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,這樣會好看些。

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


2. 左滑選單欄
  • 單擊右側導航欄底部的設定可以開啟左側的選單
  • 也可以通過左邊滑來開啟左側的選單,選單內容保持一致,功能保持一致

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


3. 元件詳情頁
  • 調整相關元件和介紹的位置,同排顯示,好看一些。

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


  • 由於Share外掛還不支援windows,這裡程式碼分享的功能直接改成程式碼複製
  • 程式碼皮膚的展開功能依舊存在,可通過展開按鈕進行展開。

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


4.收藏集功能正常
  • 收藏集的增刪改查操作移動端保持一致

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


5. 元件詳情頁的新增收藏

功能保持一致

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


6. 搜尋頁
  • 模糊查詢

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

  • 星級查詢

【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場


四.FlutterUnit近期更新

距離上一次統計已經一個多月了,由於這段時間比較忙,更新的不怎麼頻繁

1. 移動端支援顯示效能浮層
. . .
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

2.增加Widget
CustomSingleChildLayout CustomMultiChildLayout LayoutId
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

LayoutBuilder BackdropFilter CupertinoSegmentedControl
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

LayoutBuilder BackdropFilter CupertinoSegmentedControl
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

AbsorbPointer IgnorePointer 湊陣容
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

NestedScrollView SliverOverlapInjector SliverOverlapAbsorber
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場
【- Flutter 桌面篇 -】 FlutterUnit win版閃亮登場

3.標準結尾

歡迎加入程式設計技術交流聖地[-Flutter群-],一起交流。我想要營造一個分享Flutter技術、問題,平等交流的地方,絕非一個需求/新手答疑群
注1: 張口就需求的人勿擾;招聘、廣告、內推勿擾;庸俗劣質言談者勿擾。
注2: 提問前請準備好充分的描述及相關程式碼。
注3: 每週三,群裡英文日,所有人需用英文交流。

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

相關文章