原创 Flutter 路由參數傳遞及接收
上一篇Flutter頁面路由及404路由攔截實現介紹了使用路由來實現頁面的跳轉，從而簡化頁面之間的耦合，並可以實現路由攔截。在實際開發中，我們經常會需要在頁面跳轉的時候攜帶路由參數，典型的例子就是從列表到詳情頁的時候，需要攜帶詳情的 id
2021-12-11 07:56:37
16
原创 Flutter 通過自定義路由攔截實現權限管理
之前幾篇介紹了 fluro 的路由管理和轉場動畫，本篇介紹如何完成路由攔截，進而實現權限管理。“此路是我開，此樹是我栽。若是沒權限，403到來！” fluro 路由攔截思路 fluro 本身並沒有提供類似 Flutter 自帶的 onG
2021-12-11 07:56:27
9
原创 Flutter 2.0的路由把我搞懵了
前言 前面幾篇介紹了 Flutter 的路由，包括使用自帶的 Navigator 和使用 fluro 路由插件，實際上兩種方式都能滿足日常開發的使用。但是，如果你上 Flutter 的官網，就會發現關於路由，有這麼一段內容： To lea
2021-12-11 07:56:27
6
原创 使用 fluro 轉場動畫優化頁面跳轉體驗
上一篇Flutter 簡單易用的路由管理插件 fluro 簡介介紹了fluro 路由管理的基本使用。在實際應用中，我們常常會對不同的頁面採取不同的轉場動畫，以提高頁面切換過程中的用戶體驗。舉個例子，微信的掃碼後在手機上確認登錄頁面就是從底部
2021-12-11 07:56:27
11
原创 一文搞定 Flutter 底部彈窗
在實際開發過程中，經常會用到底部彈窗來進行快捷操作，例如選擇一個選項，選擇下一步操作等等。在 Flutter 中提供了一個 showModelBottomSheet 方法用於彈出底部彈窗，本篇介紹如何使用底部彈窗。 實現效果 最終實現效
2021-12-02 11:31:01
原创 Flutter 實現多選彈窗
在Flutter 底部彈窗詳解一篇中介紹了底部彈窗的實現。發出後有在琢磨如何實現多選，這也是很常用的一個功能。本篇介紹實現多選的思路和實現方式。 多選和單選的不同之處 單選的時候，選中一個就可以直接把結果返回，因此本身底部彈窗無需狀態
2021-12-02 11:31:01
原创 Flutter頁面路由及404路由攔截實現
路由管理在 App 中非常重要，例如進行頁面切換時需要路由；接收推送消息打開對應頁面時需要路由；根據不同的數據狀態進行跳轉需要路由；進行權限管控需要路由；頁面出現404，500需要路由。接下來我們會花幾篇文章介紹 Flutter 的路由。
2021-12-02 11:31:01
原创 Flutter 實現更有趣的頁面滾動效果
在仿一個微信價值幾個億的頁面這一篇中，我們使用了 ListView 將幾個 GridView 組合在一起實現了不同可滑動組件的粘合，但是這裏必須要設置禁止 GridView 的滑動，防止多個滑動組件的衝突。這種方式寫起來不太方便，事實上
2021-12-02 11:31:01
原创 Flutter 封裝一個通用的文本輸入框
上一篇Flutter 開發常用的登錄頁面提到了文本框封裝度不夠，導致代碼複用性不高的問題。在實際開發過程中，往往開始是完成功能層面的開發，然而再考慮組件封裝和代碼優化。當然，組件封裝越早做越好，因爲這樣會提高整個團隊開發的規範性和效率。
2021-11-24 22:42:52
1
原创 Flutter 開發一個常見的登錄界面
登錄頁面在 App 開發中非常常見，本篇借登錄頁面的開發介紹了文本框 TextField組件的使用，同時使用文本框的裝飾屬性實現了個性化文本框設置。 業務邏輯 爲了演示登錄跳轉，在分類瀏覽先做了一個簡單的按鈕，點擊跳轉到登錄頁面。實際的
2021-11-19 21:44:33
原创 仿一個微信價值幾個億的頁面
網傳微信支付頁面的第三方鏈接一個格子需要廣告費1一個億，微信支付頁非常適合做功能導航，本篇使用 ListView和 GridView 模仿了微信支付的頁面，同時介紹瞭如何裝飾一個組件的背景和邊緣樣式。 左側是微信支付的界面，右側是開發
2021-11-05 20:25:00
原创 使用 cached_network_image 優化 Flutter 圖片加載
在 App 中會經常遇到需要從後臺拉取圖片的場景，這一方面會給服務器帶來網絡帶寬消耗，另一方面加載圖片的等待過程也會影響用戶體驗。因此，往往會在 App 端對圖片做緩存機制，以避免同一張圖片反覆發起請求。在 Flutter 中，cache
2021-10-31 09:16:52
原创 Flutter 圖文並茂列表完整實現
列表在 App 中是最常見的形式了，在 Flutter 中提供了 ListView 這個組件來實現列表，本篇將通過 ListView 實現一個圖文並茂的列表。 界面佈局分析 本篇要實現的列表如上圖所示。我們拿到界面設計稿之後，在 UI
2021-10-29 14:51:15
原创 搞定 Flutter 列表上拉加載和下拉刷新
在實際的 App 中，下拉刷新和上滑加載更多是非常常見的交互形式。在 Flutter 中，有 flutter_easyrefresh開源插件用於實現下拉刷新和上滑加載更多。本篇介紹了有狀態組件和 flutter_easyrefresh 的
2021-10-29 14:51:05
3
原创 Flutter 構建常用的 App 頁面框架
大多數 App 中都會有底部導航欄，通過底部導航欄切換實現不同頁面之間的切換。在Flutter 中提供了 BottomNavigationBar組件實現底部導航。本篇介紹通過 BottomNavigationBar和 IndexedSta
2021-10-25 11:38:07