Flutter：如何从 JSON 创建收藏夹列表

Posted 2023-05-07

【中文标题】Flutter：如何从 JSON 创建收藏夹列表

【英文标题】：Flutter : How to create Favorite List from JSON

【发布时间】：2021-07-06 13:37:34

【问题描述】：

我将在我的 Flutter 应用程序中创建一个 JSON 数据，并允许用户选择他们最喜欢的项目。这是来自 Doa 的类，我从本地 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();
                )));
  

收藏按钮已启用。但是，当我关闭应用程序时，所有收藏的项目都会丢失。 我的代码的结果显示在这里

在我对项目给予一些“爱”之后，当我关闭应用程序并重新打开它时，所有收藏的项目都会丢失。任何人都可以给我一些关于我的代码的建议吗？非常感谢。

【参考方案1】：

您应该将最喜欢的项目保存在本地电话中，或者您可以使用 apı 服务。您不保存该项目，当您关闭应用程序时，该项目即将为空

你可以使用这个包来保存最喜欢的项目

shared_preferences 

或

 hive