預覽圖:
![app展示](https://i.iter01.com/images/58c9a389a357bbf6a288a13d381e3a86699e8d7f3da5d0bf750f37c1bdd419f0.jpg)
![app展示](https://i.iter01.com/images/6ee1f504280c78adbba8a03eac6b6474ca8442411d11dffb418b10d0ed47b241.jpg)
![app展示](https://i.iter01.com/images/17fb7acbeffe5c9c73299e04f943c7521f68d9f35210488ef77606929b8b5302.gif)
![app展示](https://i.iter01.com/images/d2cbfe82a3ed8e36f95c111464b8c95fd9aa530066247a074282dedbf64b261b.gif)
開發環境
Flutter 1.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5391447fae (9 weeks ago) • 2018-11-29 19:41:26 -0800
Engine • revision 7375a0f414
Tools • Dart 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)
複製程式碼
編譯執行
-
克隆程式碼
原始碼地址:github.com/MeandNi/Flu…
-
安裝依賴
flutter packages get 複製程式碼
UI 大致結構
![Flutter知乎App實踐:UI+Json+Utils](https://i.iter01.com/images/f34ad2f76c658d788f3e520d58fb4230de12afcdfe53b43158cc08ddf6168be1.png)
採用類似 Android 模組化思想,將整個 App 的內容分為5個部分.
![Flutter知乎App實踐:UI+Json+Utils](https://i.iter01.com/images/aea46eea96b6d1be69d6514b28f22e2e164de4ed7e8e4fcd28dfe2641b8512b5.png)
Ui 細節
暫不敘述,期待後續文章總結。專案目前還在更新完善中,預計使用Redux、Sqlflite等技術棧填充資料部分,本專案部分介面及工具類來自Flutter_CommonApp 。
資料結構(結構圖壕無專業性可言,僅供觀賞?。)
![Flutter知乎App實踐:UI+Json+Utils](https://i.iter01.com/images/298fdf3d4c1e93b91b4eeb6c69329fb2b5385f66cc72d56591e86a3d8e8ef938.png)
![Flutter知乎App實踐:UI+Json+Utils](https://i.iter01.com/images/72d8ff6a7dd51d9d22391c1470f96251f407e6f15606e5a14db5b5d4ccc8f2eb.png)
![Flutter知乎App實踐:UI+Json+Utils](https://i.iter01.com/images/8bd203e31f5ace90424f4342dd759c839ea1a5b98301c7f7ed5f462695a70e4d.png)
第三方框架
庫 | 功能 |
---|---|
dio | 網路框架 |
carousel_slider | 輪播圖 |
cached_network_image | 圖片載入 |
share | 連結分享 |
flutter_webview_plugin | WebView |
鳴謝
感謝那些熱愛開源、一起奮鬥的朋友們。
值得學習的話,Star哦^_^
GitHub地址:github.com/MeandNi/Flu…