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

零、前言

FlutterUnit是【張風捷特烈】長期維護的一個開源項目。 歡迎star
通過一段時間的更新，FlutterUnit1.1已基本知足個人指望
目前正在逐漸增長和優化組件的收錄。如今mac版閃亮登場。

FlutterUnit.apk 下載	FlutterUnit mac版 下載	Github倉庫地址

• 鎮樓圖

---

1、如何運行出FlutterUnit mac

1. 如何使用Flutter mac

目前穩定版(Stable)本並不支持macos,你能夠切換到master分支進行體驗。

• 環境: 從新準備一個FlutterSDK,並使用flutter master分支
• 開啓macos 桌面支持: flutter config --enable-macos-desktop

---[• flutter config --enable-macos-desktop

---[• flutter --version
Flutter 1.18.0-7.0.pre.46 • channel master •
https://github.com/flutter/flutter.git
Framework • revision 1f132e90f8 (11 days ago) • 2020-04-23 11:00:12 +0530
Engine • revision d3f1c08f52
Tools • Dart 2.9.0 (build 2.9.0-2.0.dev 64b8ded48b)
複製代碼

---

2. 如何獲取FlutterUnit mac代碼

• FlutterUnit的github項目中新建了一個flutter_unit_mac的分支
• FlutterUnit mac端，或說桌面端將在這個分支進行維護，和移動端獨立。

因爲移動端和桌面端的狀況有很大的不一樣，並且二者須要的SDK不一樣。 因此我並不在原移動端代碼中進行適配，而是新建分支進行兩個獨立的項目。 其實兩種徹底不一樣的情景，並無必要強行合一，不然會感受處處束手束腳。 判斷起來也會讓代碼變的複雜和難以閱讀，獨立維護也許是更好的選擇。

---

3. 如何運行和打包

• 獲取依賴包: flutter pub get
• 運行命令: flutter run -d macos， 或直接經過AndroidStudio 選擇設備運行

---

• 打包macos: flutter build macos,在build/macos/Build/Release中能夠看到應用

---

2、. FlutterUnit mac 功能簡述

因爲mac端錄屏出的gif太大了，就不放動圖了，全部功能同移動端
使用詳情可參見: 【 FlutterUnit 食用指南】 開源篇
本文會說一下我作FlutterUnit mac端的緣由和一些界面的變更。

---

1. FlutterUnit主頁界面

• 對於桌面來講，最麻煩的當屬導航欄了，若是直接用底欄或頂欄，那會很是醜
• 一般須要左欄，固然這些對於動手能力超強的我，都是小菜。有就用，沒有就造。
• 桌面程序通常都很寬,能夠用GridView根據狀況分多欄顯示item,這樣會好看些。

---

2. 左滑菜單欄

• 單擊右側導航欄底部的設置能夠打開左側的菜單
• 也能夠經過左邊滑來打開左側的菜單，菜單內容保持一致，功能保持一致

---

3. 組件詳情頁

• 調整相關組件和介紹的位置，同排顯示，好看一些。

---

• 因爲Share插件還不支持macos,這裏代碼分享的功能直接改爲代碼複製。
• 代碼面板的展開功能依舊存在,可經過展開按鈕進行展開。

---

4.收藏集功能正常

• 收藏集的增刪改查操做和移動端保持一致

---

5. 組件詳情頁的添加收藏

功能保持一致

---

6. 搜索頁

• 模糊查詢

• 星級查詢

其實適配到macos我就花了小半天的時間。主要就是主頁右邊欄的設計和實現。
這也得益於項目的清晰，我知道哪些文件是幹嗎的，因此抽離是很重要的，酌情抽出變量、方法或類，不要什麼東西都塞在一塊兒，一旦代碼變更就是滅頂之災。另外bloc維護的業務邏輯能夠絲絕不動，只需將相關頁面的一些結構進行調整便可，這也是bloc的優點。

---

3、作FlutterUnit mac端的緣由

1. 其一: 裝X

• 若是活着不是爲了裝X,那一切都將毫無心義。----張風捷特烈

---

2. 其二: 讓更多人知道flutter的桌面應用

我接觸flutter也有一年半了，半年前開始從事flutter桌面應用的開發，踩過不少坑，也學到不少東西。一切的經歷將我對flutter的理解提高了一個層次。可能不少人還在觀望flutter在移動端的狀況 。卻已不知，flutter的桌面應用已在茁壯成長，特別是不少三方插件已經有macos支持。

一套代碼運行在全部的設備上，我稱爲統一的跨平臺解決方案,因爲設備的應用場景不一樣，大小不一樣，強行進行適配感受維護的成本過高，這是平臺自己的侷限性。
我愈來愈感受Flutter 並不是是一個統一的跨平臺解決方案，並且能夠給編程者一個跨平臺的可能性。 其中最重要的一點是: 任何一個程序員，即便它不會C++、C#、Java、Js,也能夠經過flutter/dart代碼寫出mac程序、寫出windows程序、寫出android程序、寫出ios程序、寫出linux程序、寫出web程序，這就是Flutter所提供的可能性。作夢都沒想過玩移動端的我能作出一個mac程序、寫出一個windows程序。

固然只會flutter/dart，瓶頸也會存在的，對於平臺的特性你不太可能徹底理解。但也無須瞭解全部的平臺特性，畢竟軟件的開發並不是一我的的事。插件生態的日益豐富，會逐漸下降flutter開發者對平臺的依賴性。對於特定領域、特定功能的軟件、也許會出現各端的flutter插件師職業。
天下大勢，合久必分，由於沒有一我的能夠抗住全部的事,一人玩轉六端平臺也不切實際。精一而協同,各司其職,這是解決大問題的有效手段。就像人體由各類功能的細胞共同協做，維持個體生命，而不是一個萬能細胞統合做用。

統一的跨平臺解決方案是個美好而偉大的夢。就像讓全部人都說一種語言溝通同樣，也許只是一個夢而已。它也許不會終止於Flutter。但Flutter所提供的讓編程者跨平臺的可能性，就像一個萬能的翻譯機，這無疑是里程碑式的，會閃爍它的光芒。在此，雖然我我的能力微薄，希望舉起這星火，FlutterUnit將是這根火把，與我前行。大家要來，便隨; 要離，便去, 皆與我無關。

---

3. 其三: 最重要的一點,爲了數據維護的方便

其實除了FlutterUnit以外，以前還有一個FlutterUnit tool的項目
這個項目是用來維護數據庫的。看過FlutterUnit源碼的應該都知道，FlutterUnit是由本地數據庫驅動的。沒錯，就是那個flutter.db。其中關於組件信息、詳情信息、詳情代碼、收藏集信息所有都儲存在這個數據庫中。

但這樣作有個很大的缺點: 數據的更新很是困難，好比修改了實例代碼，或修復了文案，或者再拓展一個組件都要去修改數據庫，這樣維護的成本很是高。因而聰明的我想到了一個解決方案。定義規則和解析規則。 因而我花了兩天，對因此的組件源碼進行重構，知足以下格式

/// create by 張風捷特烈 on 2020-03-24
/// contact me by email 1981462002@qq.com
/// 說明:
///
//    {
//      "widgetId": 34,
//      "priority": 1,
//      "name": "Divider顏色和粗細",
//      "subtitle": "【color】: 顏色 【Color】\n"
//          "【thickness】: 線粗細 【double】",
//    }

import 'package:flutter/material.dart';

class CustomDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataColor = [
      Colors.red, Colors.yellow,
      Colors.blue, Colors.green];
    var dataThickness = [1.0, 2.0, 4.0, 6.0];
    var data = Map.fromIterables(dataColor, dataThickness);
    return Column(
      children: dataColor
          .map((e) => Divider(
        color: e,
        thickness: data[e],
      ))
          .toList(),
    );
  }
}
複製代碼

經過node_parser.dart進行解析。爬取整個項目，一一解析生成bean。 再經過tool插入數據庫中。這樣一來，我能夠隨意修改和添加介紹組件的信息。只需不到1s的時間就能爬取所有全部文件進行數據同步，這就是工具帶來的價值。但這價值的背後，是一個正則的匹配、規則的構思和實踐的過程。遇到問題和解決問題的過程。當我寫完整個工具時，那這感受無疑是暢快的,是能力付諸於現實的快感。 固然這個工具我並未提交，也不會影響到FlutterUnit的任何展示。
使用mac的有點在於能夠很方便地訪問文件,進行爬取分析，這是移動端所不及的。

最後挖個新坑: 個人我的博客正在整理中: king.toly1994.com/
不久的未來會有一個Flutter相關的長期更新計劃。這時候適合喊一句:
我是張風捷特烈，那個要成爲編程之王的男人。Bye

---

尾聲

歡迎Star和關注FlutterUnit 的發展，讓咱們一塊兒攜手，成爲Unit一員。
另外本人有一個Flutter微信交流羣，歡迎小夥伴加入，共同探討Flutter的問題，期待與你的交流與切磋。

@張風捷特烈 2019.04.04 未允禁轉
個人公衆號:編程之王
聯繫我--郵箱:1981462002@qq.com --微信:zdl1994328
~ END ~