[英]Flutter : How to create Favorite List from JSON
我將在我的 flutter 應用程序中創建一個 JSON 數據,並允許用戶選擇他們最喜歡的項目。 這是來自 Doa 的 class,我從本地 JSON 文件中獲取數據。
import 'dart:convert';
List<Doa> doaFromJson(String str) =>
List<Doa>.from(json.decode(str).map((x) => Doa.fromJson(x)));
String doaToJson(List<Doa> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class Doa {
Doa({
this.id,
this.grup,
this.judul,
this.lafaz,
this.latin,
this.arti,
this.tentang,
this.mood,
this.tag,
this.fav,
});
final int id;
final String grup;
final String judul;
final String lafaz;
final String latin;
final String arti;
final String tentang;
final String mood;
final String tag;
bool fav;
factory Doa.fromJson(Map<String, dynamic> json) => Doa(
id: json["id"],
grup: json["grup"],
judul: json["judul"],
lafaz: json["lafaz"],
latin: json["latin"],
arti: json["arti"],
tentang: json["tentang"],
mood: json["mood"],
tag: json["tag"],
fav: json["fav"],
);
Map<String, dynamic> toJson() => {
"id": id,
"grup": grup,
"judul": judul,
"lafaz": lafaz,
"latin": latin,
"arti": arti,
"tentang": tentang,
"mood": mood,
"tag": tag,
"fav": fav,
};
}
這是我的主頁,顯示 JSON 數據列表。
import 'package:flutter/material.dart';
import 'package:json_test/class/doa.dart';
import 'package:json_test/page/DoaPage.dart';
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
List<Doa> doaList;
bool _isInit = true;
Future<void> fetchDoa(BuildContext context) async {
final jsonstring =
await DefaultAssetBundle.of(context).loadString('assets/doa.json');
doaList = doaFromJson(jsonstring);
_isInit = false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("JSON Data test"),
),
body: Container(
child: FutureBuilder(
future: _isInit ? fetchDoa(context) : Future(null),
builder: (context, _) {
if (doaList.isNotEmpty) {
return ListView.builder(
itemCount: doaList.length,
itemBuilder: (BuildContext context, int index) {
Doa doa = doaList[index];
return Card(
margin: EdgeInsets.all(8),
child: ListTile(
title: Text(doa.judul),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) =>
DoaPage(
doa: doa,
)));
},
trailing: IconButton(
icon: Icon(
doa.fav
? Icons.favorite
: Icons.favorite_border,
color: doa.fav ? Colors.red : null,
),
onPressed: () =>
setState(() => doa.fav = !doa.fav),
)));
},
);
}
return CircularProgressIndicator();
})));
}
}
最喜歡的按鈕起作用了。 但是,當我關閉應用程序時,所有收藏的項目都會丟失。 我的代碼的結果顯示在這里
在我對這些項目給予一些“愛”之后,當我關閉應用程序並重新打開它時,所有收藏的項目都會丟失。 任何人都可以給我一些關於我的代碼的建議嗎? 非常感謝。
您應該保存最喜歡的項目本地電話,或者您可以使用 apı 服務。 您不保存該項目,當您關閉應用程序時,該項目是即將到來的 null
您可以將此 package 用於保存最喜歡的項目
shared_preferences
或者
hive
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.