如何在flutter/动态条形图中显示Json api数据

Question

**我正在尝试快速开发 Covid 19 应用程序。并尝试在应用程序的仪表板中呈现动态条形图。我尝试编写一些代码，但这无法从 API 中获取数据显示动态条形图。
以下是一些我已尽力但显示错误的代码。

这是我的测试应用程序截图 enter image description here

enter code here

import 'dart:convert';

import 'dart:convert';

import 'package:NavigationBar/userModel.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter_sparkline/flutter_sparkline.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:NavigationBar/userModel.dart';
import 'package:http/http.dart'as http;

class Dashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }


  }



  @override
  Widget build(BuildContext context)
  {

    return MaterialApp(

      debugShowCheckedModeBanner: false,
      home: HomePage(


      ),

    );


  }


class HomePage extends StatefulWidget
{

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
{


    Map mapResponce;

  static List<charts.Series< addcharts, String>> get series => null;


    Future fetchdata() async{
      http.Response response;
      response = await http.get("https://disease.sh/v3/covid-19/all");
      if(response.statusCode==200){
        setState(() {
          mapResponce =json.decode(response.body);
        });
      }
    }

  //static var chartdisplay;

  //get _getUser => null;

  @override
  void initState() {
    // TODO: implement initState
    fetchdata();
    super.initState();

  }
    Widget databody() {
      var data =
      [
        addcharts("val1", mapResponce['v1']),
        addcharts("val2", 20),
        addcharts("val3", 30),
        addcharts("val4", 40),
        addcharts("val5", 50),
        addcharts("val6", 60),
        addcharts("val7", 70),

      ];

      var series = [charts.Series(

        domainFn: (addcharts addcharts, _) => addcharts.label,
        measureFn: (addcharts addcharts, _) => addcharts.value,
        id: 'addcharts',
        data: data,
      ),
      ];
    }
    var chartdisplay = charts.BarChart(series,
      animationDuration: Duration(microseconds: 2000),
    );




  Material myItems(IconData icon,String heading,int color){
    return Material(
      color: Colors.white,
      elevation: 14.0,
      shadowColor: Colors.grey,
      borderRadius: BorderRadius.circular(24.0),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(
                    child:
                    //Text part
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(heading,
                        style: TextStyle(
                            color: new Color(color),
                            fontSize: 20.0
                        ),
                      ),
                    ),


                  ),

                  Material(
                    color: new Color(color),
                    borderRadius: BorderRadius.circular(24.0),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Icon(
                        icon,
                        color: Colors.white,
                        size: 30.0,
                      ),
                    ),
                  ),



                ],

              )
            ],
          ),
        ),



      ),

    );
  }


  @override
  Widget build(BuildContext context)
  {
    var chartdisplay;
    return Scaffold(
      appBar: AppBar(

        title: Text("Dashboard",
            style: TextStyle(
              color: Colors.white,
            )),
        centerTitle:true,
        leading: IconButton(icon: Icon(Icons.arrow_back),
            onPressed: (){
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => HomePage(),
                  ));

            }
        ),
      ),

      body:StaggeredGridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 12.0,
        mainAxisSpacing: 12.0,
        padding: EdgeInsets.symmetric(horizontal: 16.0,vertical: 8.0),
        
        children: <Widget>[
          myItems(Icons.add_alert,"ALERT",0xfff44336),
          myItems(Icons.ad_units,"22.13",0xffed622b),
          myItems(Icons.ad_units,"0",0xffed622b),
          myItems(Icons.read_more_outlined,"22.13",0xffed622b),
          myItems(Icons.date_range,"2/2/2021",0xffed622b),
       // FutureBuilder(
       //    future: _getUser,
       //    builder: (context,snapshot) {
       //      if (snapshot.hasData) {
       //
       //      }
       //
       //      else {
       //        return CircularProgressIndicator();
       //      }
       //    },),
          databody(),
    Expanded(
            flex: 3,
            child:Container(
              padding: EdgeInsets.all(40.0),
              height: MediaQuery.of(context).size.height*0.30,
              color: Colors.white,
              child: chartdisplay,
            ),
          ),
          Expanded(
            flex: 3,
            child:Container(
              padding: EdgeInsets.all(40.0),
              height: MediaQuery.of(context).size.height*0.30,
              color: Colors.white,
              child: chartdisplay,
                         ),
          ),




        ],
        staggeredTiles: [
          StaggeredTile.extent(2, 130.0),
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(2, 250.0),
          StaggeredTile.extent(2, 250.0),


        ],
      ),




    );
  }
}

// class dashboard extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return Container();
//   }
//
// }





class addcharts
{
  final String label;
  final int value;

  addcharts(this.label,this.value);
}

Answer 1

从此代码中删除这一行

Widget build(BuildContext context) {
    // TODO: implement build
    //throw UnimplementedError();       //this line
  }