【制定一個計劃】開發總結 - UI 設計和 Flutter 學習

我我的比較偏好簡潔的 UI 設計，惋惜不是相關專業，剛開始時徹底沒有方向。像不少 UI 工程師同樣(跟我司 UI 學的)，我第一件作的事情就是上 dribbble 尋找靈感，看到合適的就收藏下來，好往後進行模仿。

下面的截圖這是當時收藏的一些 UI 設計。

dribbble 上好看的設計實在太多，但是要把收集到的碎片重整爲本身須要的樣子就不太容易了。「靈感」收集得差很少了，接下來就本身摸索着在 Figma 畫頁面，同時也能把一些功能和交互肯定下來。

UI 設計上花了很長時間，但看看最終上線後實際的 UI，與當初設計的也相差太大了😂。邊作邊改，有的功能臨時決定放到下個版本，有的界面實現以後沒有達到預期的效果，有的功能決定不要了。隨意一點吧，反正一切都是本身作主。

關於 Flutter

Flutter 要使用 dart 語言進行開發，開始學習 Flutter 以前要簡單看下 dart。能夠跟着官網提供的 Tour 走一遍，看完也就差很少了。

而後學習 Flutter。Flutter 的學習文檔不少，社區也很活躍。中文官網的 開始使用 涵蓋了全部初學者須要知道的知識點。

學習 Flutter 比當初學習 Android 容易許多，中間沒有碰到太多問題。並且用 Flutter 開發讓人以爲比較順暢，你指望達到什麼效果，寫好代碼後熱重載立馬能看到效果，並且每每跟你的預期是一致的。比較煩人的是環境配置，以後的依賴下載(網絡問題)等，耗時間。

學習 Flutter 時 Dart 的異步模型是必需要學習的，比較重要，也有必定難度。在進行一些耗時操做，如網絡請求(這個應用將會使用到的 RPC Call)，文件讀取時就會用到。推薦兩篇文章:

1. Flutter(五)之完全搞懂Dart異步
2. Flutter/Dart中的異步

還有一點比較重要的是 BLoC(Business Logic Component) 模式，使用 BLoC 模式開發 Flutter App 能夠有效的隔離 UI 顯示 代碼和 業務邏輯(狀態管理) 代碼。看看下面👇這張經典的圖例：

BLoC 模式遵循下面的步驟處理用戶事件：
1) 用戶與 App 交互產生事件(events)，events 經過 Sinks 發送給 BLoC
2) BLoC 對事件進行處理，並更新維護在 BLoC 內的狀態數據
3) BLoC 經過 Streams 將新的狀態數據發送給 widgets，widgets 再對這些狀態數據進行渲染。

使用 BLoC 模式可以很好的將代碼進行解耦。

1. 咱們能夠隨時修改業務邏輯代碼，同時使修改對 UI 顯示的影響最小
2. 能夠隨時修改 UI 顯示，同時使業務邏輯受到的影響最小
3. 更容易對業務邏輯代碼進行測試

對於開發過程的總結留到下篇文章再進行總結，以及後續的 TestFlight 測試， App Store 審覈等事項的總結。

代碼已開源，你能夠在這裏找到：makeaplan。若是想支持並體驗一下 App，能夠在 App Store 或 Google Play 下載。