如何在未来的 builder dart 中获取复杂的 json 数据

Question

{ “计数”：6， “下一个”：空， “上一个”：空， “结果”： [ { “身份证”：6， "title": "Java6", "描述": "Java 基础", “类别”： { “身份证”：1， “名称”：“数学” }, “子类别”：{ “身份证”：4， “名称”：“测试” }, “标签”：“字符串”， “视频”： { “身份证”：6， “持续时间”：10， “缩略图”：“https://ibb.co/MZkfS7Q”， "链接": "https://youtu.be/RgMeVbPbn-Q", “浏览量”：0 }, “测验”：{ “麦克”：[ { “身份证”：6， “问题”：“q”， “选项1”：“b”， “选项2”：“c”， “选项3”：“d”， “选项4”：“e”， “答案”：1、 “出现”：0 } ] }, “平均评分”：1， “总评分数”：1 },]}

如何在未来的 dart 构建器中显示此 JSON 数据 这种方式我试过了

Future<dynamic> geteducators() async {
    String serviceurl = "https://api.spiro.study/latest-videos";
    var response = await http.get(serviceurl);
    final jsonrespose = json.decode(response.body);

    print('title: ${jsonrespose}');
    Videos latestVideo = Videos.fromJson(jsonrespose);

    
    return latestVideo.results;
  }

  @override
  void initState() {
    super.initState();
    
    _futureeducators = geteducators();
  }

Answer 1

    import 'dart:async';
    import 'dart:convert';
    
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    
    Future<Album> fetchAlbum() async {
      final response =
          await http.get(Uri.parse('https://dog.ceo/api/breeds/image/random'));
    
      if (response.statusCode == 200) {
        // If the server did return a 200 OK response,
        // then parse the JSON.
        return Album.fromJson(jsonDecode(response.body));
      } else {
        // If the server did not return a 200 OK response,
        // then throw an exception.
        throw Exception('Failed to load album');
      }
    }
    
    class Album {
      //final int userId;
      final String message;
      final String status;
      // final String region;
      // final String country;
    
      // final String title;
    
      Album({
        //required this.userId,
        required this.message,
        required this.status,
        // required this.country,
        // required this.region,
        //required this.title,
      });
    
      factory Album.fromJson(Map<String, dynamic> json) {
        return Album(
          // userId: json['userId'],
          message: json['message'],
          status: json['status'],
          // country: json['country'],
          // region: json['region'],
          //title: json['total'],
        );
      }
    }
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      MyApp({Key? key}) : super(key: key);
    
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      late Future<Album> futureAlbum;
    
      @override
      void initState() {
        super.initState();
        futureAlbum = fetchAlbum();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Fetch Data Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Fetch Data Example'),
            ),
            body: Center(
              child: FutureBuilder<Album>(
                future: futureAlbum,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(snapshot.data!.status),
                        Image(image: NetworkImage(snapshot.data!.message))
                      ],
                    ); //Text(snapshot.data!.ip);
                  } else if (snapshot.hasError) {
                    return Text("${snapshot.error}");
                  }
    
                  // By default, show a loading spinner.
                  return CircularProgressIndicator();
                },
              ),
            ),
          ),
        );
      }

}


//in this way you can get json data and show it in grid or list view.