鎮(zhèn)樓圖

一、如何運(yùn)行出FlutterUnit mac

1. 如何使用Flutter mac

目前穩(wěn)定版(Stable)本并不支持macos,你可以切換到master分支進(jìn)行體驗(yàn)。

• 環(huán)境: 重新準(zhǔn)備一個(gè)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)
復(fù)制代碼

2. 如何獲取FlutterUnit mac代碼

• FlutterUnit的github項(xiàng)目中新建了一個(gè)flutter_unit_mac的分支

• FlutterUnit mac端，或說桌面端將在這個(gè)分支進(jìn)行維護(hù)，和移動(dòng)端獨(dú)立。

由于移動(dòng)端和桌面端的情況有很大的不同，而且兩者需要的SDK不同。 所以我并不在原移動(dòng)端代碼中進(jìn)行適配，而是新建分支進(jìn)行兩個(gè)獨(dú)立的項(xiàng)目。 其實(shí)兩種完全不同的情景，并沒有必要強(qiáng)行合一，否則會(huì)感覺到處束手束腳。 判斷起來也會(huì)讓代碼變的復(fù)雜和難以閱讀，獨(dú)立維護(hù)也許是更好的選擇。

3. 如何運(yùn)行和打包

• 獲取依賴包: flutter pub get

• 運(yùn)行命令: flutter run -d macos， 或直接通過AndroidStudio 選擇設(shè)備運(yùn)行

• 打包macos: flutter build macos,在build/macos/Build/Release中可以看到應(yīng)用

二、. FlutterUnit mac 功能簡(jiǎn)述

由于mac端錄屏出的gif太大了，就不放動(dòng)圖了，所有功能同移動(dòng)端
使用詳情可參見: 【 FlutterUnit 食用指南】 開源篇
本文會(huì)說一下我做FlutterUnit mac端的原因和一些界面的變動(dòng)。

1. FlutterUnit主頁界面

• 對(duì)于桌面來說，最麻煩的當(dāng)屬導(dǎo)航欄了，如果直接用底欄或頂欄，那會(huì)非常丑

• 通常需要左欄，當(dāng)然這些對(duì)于動(dòng)手能力超強(qiáng)的我，都是小菜。有就用，沒有就造。

• 桌面程序一般都很寬,可以用GridView根據(jù)情況分多欄顯示item,這樣會(huì)好看些。

2. 左滑菜單欄

• 單擊右側(cè)導(dǎo)航欄底部的設(shè)置可以打開左側(cè)的菜單

• 也可以通過左邊滑來打開左側(cè)的菜單，菜單內(nèi)容保持一致，功能保持一致

3. 組件詳情頁

• 調(diào)整相關(guān)組件和介紹的位置，同排顯示，好看一些。

• 由于Share插件還不支持macos,這里代碼分享的功能直接改成代碼復(fù)制。

• 代碼面板的展開功能依舊存在,可通過展開按鈕進(jìn)行展開。

4.收藏集功能正常

• 收藏集的增刪改查操作和移動(dòng)端保持一致

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

功能保持一致

6. 搜索頁

• 模糊查詢

• 星級(jí)查詢

其實(shí)適配到macos我就花了小半天的時(shí)間。主要就是主頁右邊欄的設(shè)計(jì)和實(shí)現(xiàn)。
這也得益于項(xiàng)目的清晰，我知道哪些文件是干嘛的，所以抽離是很重要的，酌情抽出變量、方法或類，不要什么東西都塞在一起，一旦代碼變動(dòng)就是滅頂之災(zāi)。另外bloc維護(hù)的業(yè)務(wù)邏輯可以絲毫不動(dòng)，只需將相關(guān)頁面的一些結(jié)構(gòu)進(jìn)行調(diào)整即可，這也是bloc的優(yōu)勢(shì)。

三、做FlutterUnit mac端的原因

1. 其一: 裝X

• 如果活著不是為了裝X,那一切都將毫無意義。----張風(fēng)捷特烈

2. 其二: 讓更多人知道flutter的桌面應(yīng)用

我接觸flutter也有一年半了，半年前開始從事flutter桌面應(yīng)用的開發(fā)，踩過很多坑，也學(xué)到很多東西。一切的經(jīng)歷將我對(duì)flutter的理解提升了一個(gè)層次?？赡芎芏嗳诉€在觀望flutter在移動(dòng)端的情況 。卻已不知，flutter的桌面應(yīng)用已在茁壯成長(zhǎng)，特別是很多三方插件已經(jīng)有macos支持。

一套代碼運(yùn)行在所有的設(shè)備上，我稱為統(tǒng)一的跨平臺(tái)解決方案,由于設(shè)備的應(yīng)用場(chǎng)景不同，大小不同，強(qiáng)行進(jìn)行適配感覺維護(hù)的成本太高，這是平臺(tái)本身的局限性。
我越來越感覺Flutter 并非是一個(gè)統(tǒng)一的跨平臺(tái)解決方案，而且可以給編程者一個(gè)跨平臺(tái)的可能性。其中最重要的一點(diǎn)是: 任何一個(gè)程序員，即使它不會(huì)C++、C#、Java、Js,也可以通過flutter/dart代碼寫出mac程序、寫出windows程序、寫出android程序、寫出ios程序、寫出linux程序、寫出web程序，這就是Flutter所提供的可能性。做夢(mèng)都沒想過玩移動(dòng)端的我能做出一個(gè)mac程序、寫出一個(gè)windows程序。

當(dāng)然只會(huì)flutter/dart，瓶頸也會(huì)存在的，對(duì)于平臺(tái)的特性你不太可能完全理解。但也無須了解所有的平臺(tái)特性，畢竟軟件的開發(fā)并非一個(gè)人的事。插件生態(tài)的日益豐富，會(huì)逐漸降低flutter開發(fā)者對(duì)平臺(tái)的依賴性。對(duì)于特定領(lǐng)域、特定功能的軟件、也許會(huì)出現(xiàn)各端的flutter插件師職業(yè)。
天下大勢(shì)，合久必分，因?yàn)闆]有一個(gè)人可以抗住所有的事,一人玩轉(zhuǎn)六端平臺(tái)也不切實(shí)際。精一而協(xié)同,各司其職,這是解決大問題的有效手段。就像人體由各種功能的細(xì)胞共同協(xié)作，維持個(gè)體生命，而不是一個(gè)萬能細(xì)胞統(tǒng)合作用。

統(tǒng)一的跨平臺(tái)解決方案是個(gè)美好而偉大的夢(mèng)。就像讓所有人都說一種語言溝通一樣，也許只是一個(gè)夢(mèng)而已。它也許不會(huì)終止于Flutter。但Flutter所提供的讓編程者跨平臺(tái)的可能性，就像一個(gè)萬能的翻譯機(jī)，這無疑是里程碑式的，會(huì)閃爍它的光芒。在此，雖然我個(gè)人能力微薄，但愿舉起這星火，F(xiàn)lutterUnit將是這根火把，與我前行。你們要來，便隨; 要離，便去, 皆與我無關(guān)。

3. 其三: 最重要的一點(diǎn),為了數(shù)據(jù)維護(hù)的方便

其實(shí)除了FlutterUnit之外，之前還有一個(gè)FlutterUnit tool的項(xiàng)目
這個(gè)項(xiàng)目是用來維護(hù)數(shù)據(jù)庫(kù)的?？催^FlutterUnit源碼的應(yīng)該都知道，FlutterUnit是由本地?cái)?shù)據(jù)庫(kù)驅(qū)動(dòng)的。沒錯(cuò)，就是那個(gè)flutter.db。其中關(guān)于組件信息、詳情信息、詳情代碼、收藏集信息全部都儲(chǔ)存在這個(gè)數(shù)據(jù)庫(kù)中。

但這樣做有個(gè)很大的缺點(diǎn): 數(shù)據(jù)的更新非常困難，比如修改了實(shí)例代碼，或修復(fù)了文案，或者再拓展一個(gè)組件都要去修改數(shù)據(jù)庫(kù)，這樣維護(hù)的成本非常高。于是聰明的我想到了一個(gè)解決方案。定義規(guī)則和解析規(guī)則。 于是我花了兩天，對(duì)所以的組件源碼進(jìn)行重構(gòu)，滿足如下格式

/// create by 張風(fēng)捷特烈 on 2020-03-24
/// contact me by email 1981462002@qq.com
/// 說明:
///
//    {
//      "widgetId": 34,
//      "priority": 1,
//      "name": "Divider顏色和粗細(xì)",
//      "subtitle": "【color】: 顏色   【Color】\n"
//          "【thickness】: 線粗細(xì)   【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(),
    );
  }
}
復(fù)制代碼

通過node_parser.dart進(jìn)行解析。爬取整個(gè)項(xiàng)目，一一解析生成bean。 再通過tool插入數(shù)據(jù)庫(kù)中。這樣一來，我可以隨意修改和添加介紹組件的信息。只需不到1s的時(shí)間就能爬取全部所有文件進(jìn)行數(shù)據(jù)同步，這就是工具帶來的價(jià)值。但這價(jià)值的背后，是一個(gè)正則的匹配、規(guī)則的構(gòu)思和實(shí)踐的過程。遇到問題和解決問題的過程。當(dāng)我寫完整個(gè)工具時(shí)，那這感覺無疑是暢快的,是能力付諸于現(xiàn)實(shí)的快感。 當(dāng)然這個(gè)工具我并未提交，也不會(huì)影響到FlutterUnit的任何展現(xiàn)。
使用mac的有點(diǎn)在于可以很方便地訪問文件,進(jìn)行爬取分析，這是移動(dòng)端所不及的。

最后挖個(gè)新坑: 我的個(gè)人博客正在整理中: king./
不久的將來會(huì)有一個(gè)Flutter相關(guān)的長(zhǎng)期更新計(jì)劃。這時(shí)候適合喊一句:
我是張風(fēng)捷特烈，那個(gè)要成為編程之王的男人。Bye