Flutter Riverpod 輕鬆學(二),一些進階用法!
這篇寫於 2022 年。工具和 API 變化很快,部分步驟可能已經不適用。
快速了解幾種小技巧
Package#
https://pub.dev/packages/flutter_riverpod
listen()#
監聽 Provider 的狀態變化,參數包含上一個狀態、新的狀態
使用:在主要build函式裡進行listen的操作,只會在第一次進行監聽,不會每次更新後就監聽一次
注意:不要在其他內部的Widget builder裡進行listen的操作
ProviderScope#
overrideWithProvider(),在指定區域內覆寫Provider
- 易於測試
範例:讓ListView的child item可以使用const實體,解省效能,同時child還能動態取得資料
修飾符#
family#
取得Provider時可以添加一個參數
autoDispose#
當所有Listener釋放後不再使用Provider時,例如:頁面關閉後,自動將其銷毀,可以避免內存洩漏
onDispose()#
當Provider釋放掉的時候,可以關閉某些服務
情境:當所有監聽此Provider的元件dispose釋放掉的時候,代表沒有人使用此Provider,這時候就會釋放資源,呼叫onDispose()
注意:如果有使用keepAlive()保留狀態的話,此Provider就不會被釋放掉,也不會進onDispose()
進階#
Combining#
創建Provider時使用其他Provider的狀態。而使用Riverpod就可以提供多個相同類型的Provider,這也是相比Provider套件更好的一個特點
refresh#
強制 Provider 立即刷新,取得新的資料
- 適合列表下拉刷新,或者請求數據錯誤時重試
範例:下拉刷新
select#
可以指定某一數值更改時進行刷新,精準控制Widget刷新範圍,避免不必要的rebuild
這邊選擇只會監看name變數,只有ChangeNotifier裡的name改變時畫面才會進行刷新
撰寫測試#
範例:模擬動態牆
倉儲類介面IFeedRepository,寫了FeedRepository實作並使用
使用FutureProvider,透過FeedRepository取得動態牆資料
針對要測試的頁面FeedPage,包裹ProviderScope,並override feedsRepositoryProvider裡的狀態,更新成為了測試的倉儲類MockFeedRepository,透過假資料測試多種情境
本文範例#
相關文章#
Flutter Riverpod 輕鬆學,簡單處理狀態管理!快速了解每個Provider要如何操作yii · writing
參考#
關於我#
- Github:https://github.com/chyiiiiiiiiiiii
- Youtube:Yii
- Youtube:一起饅頭(美食頻道)
- Instagram:yiichenhi
- Email:ab20803@gmail.com
最後#
希望有幫助到你/妳,也歡迎追蹤我,方便瀏覽最新的文章!
本文原刊登於 Medium。