![](/img/trans.png)
[英]Flutter : How to use SharedPreference to get List<String>?
[英]Flutter : How to use Riverpod with SharedPreference and List<String> Variable in multipage?
我創建List<String> favId = [];
使用 SharedPreferences 存儲項目 ID 的變量,因此我重新啟動應用程序后收藏的項目 ID 不會丟失。 這是我的 SharedPreferences 方法和最喜歡的 IconButton 的詳細信息DoaPage.dart:
...
static List<String> favId = [];
getData() async {
SharedPreferences pref = await SharedPreferences.getInstance();
setState(() {
favId = pref.getStringList("id") ?? [];
});
}
void initState() {
super.initState();
getIds();
}
getIds() async {
favId = getData();
}
void saveData() async {
SharedPreferences pref = await SharedPreferences.getInstance();
pref.setStringList("id", favId);
}
...
IconButton(
icon: Icon(
favId.contains(doa.id.toString())
? Icons.favorite
: Icons.favorite_border,
color: favId.contains(doa.id.toString())
? Colors.red
: Colors.grey,
),
onPressed: () => setState(() {
doa.fav = !doa.fav;
if (favId.contains(doa.id.toString())) {
favId.removeWhere(
(element) => element == doa.id.toString());
} else {
favId.add(doa.id.toString());
}
saveData();
favId.sort();
}),
)
除此之外,我還想在 favPage.dart(另一頁)中使用 ListView.builder 顯示收藏的項目。 當然,我想從 detailDoaPage.dart 中獲取 favId。 如何在這 2 個頁面上實現提供程序/riverpod?
這是我的應用程序的預覽:
謝謝:)
我推薦的方法是創建一個 StateNotifier 來處理 state 以及與 SharedPreferences 的交互。 以下內容也簡化了小部件中的邏輯。
final sharedPrefs =
FutureProvider<SharedPreferences>((_) async => await SharedPreferences.getInstance());
class FavoriteIds extends StateNotifier<List<String>> {
FavoriteIds(this.pref) : super(pref?.getStringList("id") ?? []);
static final provider = StateNotifierProvider<FavoriteIds, List<String>>((ref) {
final pref = ref.watch(sharedPrefs).maybeWhen(
data: (value) => value,
orElse: () => null,
);
return FavoriteIds(pref);
});
final SharedPreferences? pref;
void toggle(String favoriteId) {
if (state.contains(favoriteId)) {
state = state.where((id) => id != favoriteId).toList();
} else {
state = [...state, favoriteId];
}
// Throw here since for some reason SharedPreferences could not be retrieved
pref!.setStringList("id", state);
}
}
用法:
class DoaWidget extends ConsumerWidget {
const DoaWidget({Key? key, required this.doa}) : super(key: key);
final Doa doa;
@override
Widget build(BuildContext context, ScopedReader watch) {
final favoriteIds = watch(FavoriteIds.provider);
return IconButton(
icon: favoriteIds.contains('') ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
color: favoriteIds.contains('') ? Colors.red : Colors.grey,
onPressed: () => context.read(FavoriteIds.provider.notifier).toggle(doa.id.toString()),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.