如何从 json 文件中获取数据到 flutter 中的 GridView.builder 中？

Question

我想从 JSON 文件中获取数据到 GridView.builder()，我看了很多视频但我没有得到任何结果，请帮我这样做。 这是我要使用的 JSON 文件：我的 JSON 文件在这里

{
    "Ads": {
        "show_ads": true,
        "InterAd": "unity",
        "bannerAd": "unity",
    },

    "LOCAL_BANNER": {
        "show": true,
        "image": "image1.jpg",
        "url": "https://www.google.com"
    },
    
    "MORE_APPS": [{
            "title": "Get app now",
            "img": "www.google.com",
            "url": "www.google.com",
            "country": "IN"
        }, {
            "title": "Get app now",
            "img": "www.google.com",
            "url": "www.google.com",
            "country": ""
        }
    ],

}

我想使用 MORE_APPS 键将数据填充到网格视图。 谢谢;

Answer 1

1st .. 将您的 json 存储在资产文件夹中.. 最好在rootfolder/assets中

2.. 在您的pubspec.yaml文件中注册您的资产

3..创建你的model..最好使用https://app.quicktype.io/dart/。 . 在那里复制您的 json 数据，它将为您生成 model。

    // To parse this JSON data, do
//
//     final myData = myDataFromJson(jsonString);

import 'dart:convert';

MyData myDataFromJson(String str) => MyData.fromJson(json.decode(str));

String myDataToJson(MyData data) => json.encode(data.toJson());

class MyData {
  MyData({
    this.ads,
    this.localBanner,
    this.moreApps,
  });

  Ads? ads;
  LocalBanner? localBanner;
  List<MoreApp>? moreApps;

  factory MyData.fromJson(Map<String, dynamic> json) => MyData(
    ads: Ads.fromJson(json["Ads"]),
    localBanner: LocalBanner.fromJson(json["LOCAL_BANNER"]),
    moreApps: List<MoreApp>.from(json["MORE_APPS"].map((x) => MoreApp.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "Ads": ads!.toJson(),
    "LOCAL_BANNER": localBanner!.toJson(),
    "MORE_APPS": List<dynamic>.from(moreApps!.map((x) => x.toJson())),
  };
}

class Ads {
  Ads({
    this.showAds,
    this.interAd,
    this.bannerAd,
  });

  bool? showAds;
  String? interAd;
  String? bannerAd;

  factory Ads.fromJson(Map<String, dynamic> json) => Ads(
    showAds: json["show_ads"],
    interAd: json["InterAd"],
    bannerAd: json["bannerAd"],
  );

  Map<String, dynamic> toJson() => {
    "show_ads": showAds,
    "InterAd": interAd,
    "bannerAd": bannerAd,
  };
}

class LocalBanner {
  LocalBanner({
    this.show,
    this.image,
    this.url,
  });

  bool? show;
  String? image;
  String? url;

  factory LocalBanner.fromJson(Map<String, dynamic> json) => LocalBanner(
    show: json["show"],
    image: json["image"],
    url: json["url"],
  );

  Map<String, dynamic> toJson() => {
    "show": show,
    "image": image,
    "url": url,
  };
}

class MoreApp {
  MoreApp({
    this.title,
    this.img,
    this.url,
    this.country,
  });

  String? title;
  String? img;
  String? url;
  String? country;

  factory MoreApp.fromJson(Map<String, dynamic> json) => MoreApp(
    title: json["title"],
    img: json["img"],
    url: json["url"],
    country: json["country"],
  );

  Map<String, dynamic> toJson() => {
    "title": title,
    "img": img,
    "url": url,
    "country": country,
  };
}

4.. 创建您的 function，将 json 数据转换为 model..

import 'package:flutter/services.dart';

Future<MyData> readJsonFile() async {
  final String response = await rootBundle.loadString('assets/filejson.json');
  final data = myDataFromJson(response);
  return data;
}

5..声明一个全局变量..在这种情况下，我将model命名为MyData..所以全局声明

MyData data = MyData();

6. 在您的 initstate 中确保将您的值分配给变量data

    void initState() { readJsonFile().then((value) => setState((){ data = value; })); super.initState();}

然后执行以下操作

FutureBuilder(
        future: readJsonFile(),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if(snapshot.hasData){
          return Center(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(
                        color: Colors.lightGreen,
                        child: Column(
                          children: [
                            Text(
                                "Ads"
                            ),
                            Text("show_ads: ${data.ads!.showAds}"),
                            Text("InterAd : ${data.ads!.interAd}"),
                            Text("bannerAd: ${data.ads!.bannerAd}")
                          ],
                        ),
                      ),
                      Container(
                        color: Colors.amber,
                        child: Column(
                          children: [
                            Text(
                                "LOCAL_BANNER"
                            ),
                            Text("show: ${data.localBanner!.show}"),
                            Text("image: ${data.localBanner!.image}"),
                            Text("url: ${data.localBanner!.url}"),
                          ],
                        ),
                      )
                    ],
                  ),
                  SizedBox(height: 40,),
                  Expanded(
                    child: GridView.builder(
                        itemCount: data.moreApps!.length,
                        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                            maxCrossAxisExtent: 200,
                            childAspectRatio: 3 / 2,
                            crossAxisSpacing: 20,
                            mainAxisSpacing: 20),
                        itemBuilder: (context, index) {
                          return Container(
                            child: Column(
                              children: [
                                Text(data.moreApps![index].title!),
                                Text(data.moreApps![index].img!),
                                Text(data.moreApps![index].url!),
                                Text(data.moreApps![index].country!),
                              ],
                            ),
                          );
                        }),
                  ),
                ],
              )
          );        }
        else{
          return const CircularProgressIndicator();
        }
      },)