相關(guān)文章一：用Flutter給Readhub寫一個App

相關(guān)文章二：Flutter版本Readhub開源

相關(guān)文章三：Flutter iOS真機(jī)調(diào)試及打包過程記錄

相關(guān)文章四：Flutter iOS打包過程及構(gòu)建上線審核通過流程總結(jié)

相關(guān)文章五：Freadhub終于升級Flutter2.0了

相關(guān)文章六：Freadhub Mac版它來了

前言

Freadhub是由AriesHoo開發(fā)維護(hù)的一個Flutter開源項目--readhub的非官方產(chǎn)品。

之前Freadhub已有Androd、iOS版本,隨著Flutter2.0的發(fā)布Flutter進(jìn)入了全平臺stable時代, 經(jīng)過一段時間的平臺及屏幕適配，MacOS版本它終于來了說得好像有人在期待一樣??。

• 鎮(zhèn)樓圖 1024*768 默認(rèn)尺寸

image

下載了 MacOS的壓縮包解壓后點擊 圖標(biāo) 打開。

點擊打開

出現(xiàn) 來自身份不明的開發(fā)者提示。依次系統(tǒng)偏好設(shè)置->安全性與隱私->通用中解鎖并允許應(yīng)用安裝即可。

解鎖運行

打開

Mac版本準(zhǔn)備工作

1、獲取MacOS代碼

本著Flutter-Write Once Run Anywhere的原則,MacOS版本也在master分支未開新分支。

• 有原始版本代碼只需Update一下，然后flutter pub get一下即可。
• 沒有原始代碼則可在Github或Gitee上 clone一下，然后flutter pub get一下即可。

2、開啟MacOS支持

目前Flutter 2.0 Stable已支持MacOS,只需開啟下MacOS支持即可。

• 環(huán)境：Flutter SDK Flutter stable 2.0+
• 開啟MacOS支持：flutter config --enable-macos-desktop
• 創(chuàng)建MacOS環(huán)境配置:flutter create --platforms=macos .

 % flutter --version
Flutter 2.2.0 ? channel stable ? https://github.com/flutter/flutter.git
Framework ? revision b22742018b (12 days ago) ? 2021-05-14 19:12:57 -0700
Engine ? revision a9d88a4d18
Tools ? Dart 2.13.0

% flutter config --enable-macos-desktop
Setting "enable-macos-desktop" value to "true".

  % flutter create --platforms=macos .
Recreating project ....
  flutter_readhub_github.iml (created)
  macos/Runner.xcworkspace/contents.xcworkspacedata (created)
  macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Flutter/Flutter-Debug.xcconfig (created)
  macos/Flutter/Flutter-Release.xcconfig (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
Running "flutter pub get" in flutter_readhub_github...           1,078ms
Wrote 7 files.

All done!

3、基礎(chǔ)配置-icon、name、網(wǎng)絡(luò)等

• 準(zhǔn)備MacOS需要的各種尺寸icon，推薦使用 Image Asset Icon Resizer Lite 可以裁剪出各種尺寸的icon、launch image --包括Android、iOS、MacOS等。

生成icon

將生成的icon資源及配置文件拷貝到對應(yīng)文件夾即可

macos icon配置

這里推薦文件名保持和Flutter默認(rèn)生成的一致，可在Image Asset Icon Resizer Lite設(shè)置。如下圖：

設(shè)置導(dǎo)出flieName

• 設(shè)置App 信息：依次進(jìn)入macos->Runner->Configs文件夾打開AppInfo.xcconfig編輯PRODUCT_NAME值，該值決定了App窗口標(biāo)題名和程序塢鼠標(biāo)懸浮提示文字以及關(guān)于頁面信息；PRODUCT_COPYRIGHT決定了關(guān)于頁面版權(quán)聲明信息。如下圖：

AppInfo.xcconfig

程序塢

關(guān)于信息

• 網(wǎng)絡(luò)配置：因涉及請求接口需在macos->Runner文件夾下的DebugProfile.entitlements及Release.entitlements文件添加以下配置

    <key>com.apple.security.network.server</key>
    <true/>
    <key>com.apple.security.network.client</key>
    <true/>

網(wǎng)絡(luò)配置

4、運行與打包

• 執(zhí)行命令：flutter run -d macos 或直接通過 Android Studio選擇macOS(desktop)運行

 % flutter run -d macos
Launching lib/main.dart on macOS in debug mode...
Running pod install...                                           1,956ms

Android Studio運行

• 執(zhí)行命令：flutter build macos --release等待執(zhí)行完成即可

% flutter build macos --release

?? Building with sound null safety ??

Running pod install...                                           1,709ms

• 執(zhí)行完成后，在build->macos->Build->Products->Release文件夾里可看到打包后的應(yīng)用，直接雙擊打開即可。

打包后的app

Freadhub MacOS功能簡介

1、主界面布局

• 桌面端尺寸相較移動端更大如果采用移動端的底部/頂部tab模式會很丑，故在做MacOS適配過程中順手做了下響應(yīng)式布局--這里不做展開后期會單開文章闡述。
• 使用GridView來讓屏幕展示更多可用信息
• 左側(cè)頂部導(dǎo)航欄、底部為今日詩詞推薦--使用今日詩詞,在此感謝??、最底部仍然為更多信息及深色/淺色主題切換按鈕

寬屏：1280*800 最大尺寸

寬屏最大尺寸

窄屏：480*640 最小尺寸

窄屏

• 這里設(shè)置widow 窗口大小用到了desktop_window插件-支持MacOS、Windows、Linux；Freadhub 設(shè)置默認(rèn)尺寸1024*768、最小尺寸480*640、最大尺寸1280*800。

2、今日詩詞

• 因屏幕尺寸過大，左側(cè)導(dǎo)航欄部分只有導(dǎo)航tab功能會顯得很空故在tab底部增加今日詩詞功能
• 為保持適配一致性和美觀性：寬屏模式顯示詩詞內(nèi)容+匹配標(biāo)簽+切歌三部分內(nèi)容；窄屏模式只顯示詩詞內(nèi)容。--當(dāng)然這里的美觀性是個見仁見智的事情，大家輕噴。
• 增加tooltip功能當(dāng)鼠標(biāo)懸浮或手指長按則顯示更多信息 詩詞標(biāo)題+朝代作者+詩詞全文+詩詞翻譯(如果有)

今日詩詞tooltip

3、更多信息

• 布局樣式和移動端一致--開源地址顯示了Github與Gitee
• 分享功能與移動端有差異--移動端彈出卡片分享移動端蒲公英下載鏈接；桌面端的跳轉(zhuǎn)網(wǎng)頁顯示apk及macOS壓縮包分享頁面

更多信息

下載分享頁面

4、資訊卡片

• 資訊卡片背景樣式優(yōu)化-增加邊框線區(qū)分不同資訊、鼠標(biāo)懸浮/手指按下邊界線及背景變?yōu)橹黝}相關(guān)色

懸浮邊框色變化

• 修改點擊事件-將原來點擊事件資訊摘要信息全部展示變更為打開查看資訊詳情、熱門話題詳情直接跳轉(zhuǎn)readhub網(wǎng)頁詳情

查看詳情

該功能使用到了flutter_macos_webview插件

• 去掉熱門話題相關(guān)推薦icon變更為分享icon-原長按彈出分享卡片不變

分享

該功能使用到了share_plus插件

5、其它功能

啥也不說了，都在代碼里了， Github、 Gitee。歡迎拍磚 扔雞蛋。

總結(jié)

1、就著這次適配MacOS過程，鄙人感覺Flutter確實很香！在UI層面確實在各個平臺上的復(fù)用率在90%以上。但是確實需要根據(jù)不同的平臺特性做調(diào)整：如在桌面系統(tǒng)使用移動端的頂部/底部導(dǎo)航就很別扭。

2、 平臺相關(guān)插件除開移動端的其它平臺確實要走的路還很漫長。--所以未來會有插件工程師這個專門工種？

3、桌面系統(tǒng)能多窗口就更好了。--Android是單Activity的模式的，iOS也是類似的。這種模式在移動端的沒啥問題，畢竟設(shè)備就那么大點。但是桌面系統(tǒng)普遍較大,所有頁面跳轉(zhuǎn)都在同一個窗口就感覺差點意思。也許是支持的只是我不知道？--有知道的大佬萬望不吝賜教，感謝??！

4、Flutter仍然是未來跨平臺的最佳選擇 沒有之一

結(jié)語

該App為筆者學(xué)習(xí)Flutter練手開發(fā)的 ，權(quán)當(dāng)拋磚引玉了，萬望各位不吝賜教

關(guān)于我

掘金: AriesHoo

簡書: AriesHoo

GitHub: AriesHoo

Email: AriesHoo@126.com