yii.
← Writing
Flutter 技術 · · 6 min read

Flutter Riverpod 輕鬆學(二),一些進階用法!

這篇寫於 2022 年。工具和 API 變化很快,部分步驟可能已經不適用。

快速了解幾種小技巧

https://riverpod.dev/img/logo.png

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,透過假資料測試多種情境


本文範例#

GitHub - chyiiiiiiiiiiii/get_some_riverpod: Riverpod is a good package for managing the states of…Riverpod is a good package for managing the states of your app perfectly. - GitHub - chyiiiiiiiiiiii/get_some_riverpod…github.com

相關文章#

Flutter Riverpod 輕鬆學,簡單處理狀態管理!快速了解每個Provider要如何操作yii · writing

參考#

關於我#

最後#

希望有幫助到你/妳,也歡迎追蹤我,方便瀏覽最新的文章!

本文原刊登於 Medium。