使用折线图加载页面时出错 "Tried calling: call()"

Question

在我的应用程序中，我尝试使用以下代码来显示一个折线图，下面有一个用于显示数据的选择器。

class _SearchResultState extends State<SearchResult>  {      
  dynamic data_snap;
  bool _loading = false;
  Future<dynamic> getData() async{
    final DocumentReference document = FirebaseFirestore.instance.collection("Animals").doc(widget.data);
    _loading = true;
   await document.get().then<dynamic>(( DocumentSnapshot snapshot) async{
    setState(() {
      data_snap =snapshot.data;
      _loading = false;        
  });
});
}
  Map<int, LineChartData> selection;
  int _selected = 2;
  bool showAvg = false;
  @override
  void initState(){
    selection = {0: oneWeek(), 1: oneMonth(), 2: oneYear()};
    super.initState();
    getData();
  }

@override
 Widget build(BuildContext context) {
 SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
]);

SizeConfig().init(context);

return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    iconTheme: IconThemeData(color: Colors.lightGreen),
    backgroundColor: Colors.grey[100],
    title: const Text('Details', style:
    TextStyle(color: Colors.lightGreen)),
  ),
  body: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [ _loading ? CircularProgressIndicator():
          Container(
            height: SizeConfig.safeBlockHorizontal * 150,
            child: Card(
              color: Theme.of(context).cardColor,
              child: Padding(
                padding: const EdgeInsets.only(
                    top: 5.0,
                    bottom: 5.0,
                    left: 5.0,
                    right: 5.0
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Row(
                      children: _loading ? CircularProgressIndicator(): [
                        Text(data_snap()['Name'],
                            style: new TextStyle(
                                fontSize: SizeConfig.blockSizeHorizontal * 5,
                                fontWeight: FontWeight.bold))
                      ],
                    ),               
                    Row(
                      children: [ _loading ? CircularProgressIndicator():
                      new Container(
                        width: SizeConfig.safeBlockHorizontal * 90,
                        height: SizeConfig.safeBlockHorizontal * 38,
                        alignment: Alignment.center,
                        child: LineChart(
                          selection[_selected],
                        ),
                        ),],),
                    Row(
                      children: [ _loading ? CircularProgressIndicator():
                      new Container(
                        width: SizeConfig.safeBlockHorizontal * 90,
                        height: SizeConfig.safeBlockHorizontal * 38,
                        alignment: Alignment.center,
                        child:
                        SizedBox(
                            width: 300,
                            height: 34,
                            child: Row(
                              children: [
                                FlatButton(
                                    onPressed: () {
                                      setState(() {
                                        _selected = 2;
                                      });
                                    },
                                    child: Text('Week',
                                        style: TextStyle(
                                            fontSize: 12,
                                            color: _selected == 0
                                                ? Colors.white.withOpacity(0.5)
                                                : Colors.white))),
                                FlatButton(
                                    onPressed: () {
                                      setState(() {
                                        _selected = 1;
                                      });
                                    },
                                    child: Text('Month',
                                        style: TextStyle(
                                            fontSize: 12,
                                            color: _selected == 1
                                                ? Colors.white.withOpacity(0.5)
                                                : Colors.white))),
                                FlatButton(
                                    onPressed: () {
                                      setState(() {
                                        _selected = 2;
                                      });
                                    },
                                    child: Text('Year',
                                        style: TextStyle(
                                            fontSize: 12,
                                            color: _selected == 2
                                                ? Colors.white.withOpacity(0.5)
                                                : Colors.white))),
                              ],
                            ))
                      )],),
                  ],
                ),
              ),
            ),

          )
          ]
      )
  ),
);
}

LineChartData oneWeek() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_week2 = listMax2reversed.take(
    data_snap()['Historie_Zeitangabe']['1w']);
final list_one_week_list2 = List.from(list_one_week2);
final list_one_week_list_rev2 = List.from(list_one_week_list2.reversed);
List<FlSpot> spots_one_week2 =
list_one_week_list_rev2
    .asMap()
    .entries
    .map((e) {
  return FlSpot(e.key.toDouble(), e.value);
}).toList();

return LineChartData(
    lineTouchData: LineTouchData(enabled: true),
    gridData: FlGridData(
      show: false,
      drawHorizontalLine: false,
      drawVerticalLine: false,
      getDrawingVerticalLine: (value) {
        return FlLine(
          color: Colors.black,
          strokeWidth: 1,
        );
      },
      getDrawingHorizontalLine: (value) {
        return FlLine(
          color: const Color(0xff37434d),
          strokeWidth: 1,
        );
      },
    ),

    lineBarsData: [
      LineChartBarData(
        spots: spots_one_week2,
        isCurved: true,
        barWidth: 1,
        colors: [
          Colors.black87,
        ],
        belowBarData: BarAreaData(
          show: true
        ),
        aboveBarData: BarAreaData(
            show: true,
            colors: [Colors.grey.withOpacity(0.3)]
        ),
        dotData: FlDotData(
          show: false,
          getDotPainter: (spot, percent, barData, index) =>
              FlDotCirclePainter(
                  radius: 10,
                  color: Colors.deepOrange.withOpacity(0.5)),
        ),
      ),
    ],
    titlesData: FlTitlesData(
      bottomTitles: SideTitles(
          showTitles: false,
          reservedSize: 3,
          getTitles: (value) {
            switch (value.toInt()) {
              case 0:
                return '2019';
              case 1:
                return '2020';
              case 2:
                return '2021';
              case 3:
                return '2022';
              default:
                return '';
            }
          }),
      leftTitles: SideTitles(showTitles: true, margin: 3,
          reservedSize: SizeConfig.safeBlockHorizontal * 11
      ),
      rightTitles: SideTitles(showTitles: false),
      topTitles: SideTitles(showTitles: false),
    ));
}

LineChartData oneMonth() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_month2 = listMax2reversed.take(data_snap()['Historie_Zeitangabe']['1m']);
final list_one_month_list2 = List.from(list_one_month2);
final list_one_month_list_rev2 = List.from(list_one_month_list2.reversed);
List<FlSpot> spots_one_month2 =
list_one_month_list_rev2
    .asMap()
    .entries
    .map((e) {
  return FlSpot(e.key.toDouble(), e.value);
}).toList();

return LineChartData(
    lineTouchData: LineTouchData(enabled: true),
    gridData: FlGridData(
      show: false,
      drawHorizontalLine: false,
      drawVerticalLine: false,
      getDrawingVerticalLine: (value) {
        return FlLine(
          color: Colors.black,
          strokeWidth: 1,
        );
      },
      getDrawingHorizontalLine: (value) {
        return FlLine(
          color: const Color(0xff37434d),
          strokeWidth: 1,
        );
      },
    ),

    lineBarsData: [
      LineChartBarData(
        spots: spots_one_month2,
        isCurved: true,
        barWidth: 1,
        colors: [
          Colors.black87,
        ],
        belowBarData: BarAreaData(
          show: true
        ),
        aboveBarData: BarAreaData(
            show: true,
            colors: [Colors.grey.withOpacity(0.3)]
        ),
        dotData: FlDotData(
          show: false,
          getDotPainter: (spot, percent, barData, index) =>
              FlDotCirclePainter(
                  radius: 10,
                  color: Colors.deepOrange.withOpacity(0.5)),
        ),
      ),
    ],
    titlesData: FlTitlesData(
      bottomTitles: SideTitles(
          showTitles: false,
          reservedSize: 3,
          getTitles: (value) {
            switch (value.toInt()) {
              case 0:
                return '2019';
              case 1:
                return '2020';
              case 2:
                return '2021';
              case 3:
                return '2022';
              default:
                return '';
            }
          }),
      leftTitles: SideTitles(showTitles: true, margin: 3,
          reservedSize: SizeConfig.safeBlockHorizontal * 11
      ),
      rightTitles: SideTitles(showTitles: false),
      topTitles: SideTitles(showTitles: false),
    ));
}

LineChartData oneYear() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_year2 = listMax2reversed.take(data_snap()['Historie_Zeitangabe']['1y']);
final list_one_year_list2 = List.from(list_one_year2);
final list_one_year_list_rev2 = List.from(list_one_year_list2.reversed);
List<FlSpot> spots_one_year2 =
list_one_year_list_rev2
    .asMap()
    .entries
    .map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();

return LineChartData(
    lineTouchData: LineTouchData(enabled: true),
    gridData: FlGridData(
      show: false,
      drawHorizontalLine: false,
      drawVerticalLine: false,
      getDrawingVerticalLine: (value) {
        return FlLine(
          color: Colors.black,
          strokeWidth: 1,
        );
      },
      getDrawingHorizontalLine: (value) {
        return FlLine(
          color: const Color(0xff37434d),
          strokeWidth: 1,
        );
      },
    ),

    lineBarsData: [
      LineChartBarData(
        spots: spots_one_year2,
        isCurved: true,
        barWidth: 1,
        colors: [
          Colors.black87,
        ],
        belowBarData: BarAreaData(
          show: true
        ),
        aboveBarData: BarAreaData(
            show: true,
            colors: [Colors.grey.withOpacity(0.3)]
        ),
        dotData: FlDotData(
          show: false,
          getDotPainter: (spot, percent, barData, index) =>
              FlDotCirclePainter(
                  radius: 10,
                  color: Colors.deepOrange.withOpacity(0.5)),
        ),
      ),
    ],
    titlesData: FlTitlesData(
      bottomTitles: SideTitles(
          showTitles: false,
          reservedSize: 3,
          getTitles: (value) {
            switch (value.toInt()) {
              case 0:
                return '2019';
              case 1:
                return '2020';
              case 2:
                return '2021';
              case 3:
                return '2022';
              default:
                return '';
            }
          }),
      leftTitles: SideTitles(showTitles: true, margin: 3,
          reservedSize: SizeConfig.safeBlockHorizontal * 11
      ),
      rightTitles: SideTitles(showTitles: false),
      topTitles: SideTitles(showTitles: false),
    ));
}
}

我已经尝试使用 FutureBuilder，但它不适用于 initState() 中的选择。

我在“List listMax2 = List.from(data_snap()['Historie_Inhalt']);”行中收到以下错误函数 LineChartData oneWeek().

The method 'call' was called on null.
Receiver: null
Tried calling: call()

我该如何解决这个问题？

Answer 1

尝试这样做：

Map<int, LineChartData> selection = {};

@override
void initState(){
  super.initState();
  getData().then((_) { //or use whenComplete
     setState(() => selection = {0: oneWeek(), 1:oneMonth(), 2: oneYear()});
  }
 }

并像这样更改您的 Row：

Row(
   children: [
      _loading
         ? CircularProgressIndicator()
         : Container(
              width: SizeConfig.safeBlockHorizontal * 90,
              height: SizeConfig.safeBlockHorizontal * 38,
              alignment: Alignment.center,
              child: selection.isNotEmpty && selection.containsKey(_selected)
                 ? LineChart(selection[_selected])
                 : Container() ,
),],),

使用折线图加载页面时出错 "Tried calling: call()"

Error "Tried calling: call()" while loading page with Linechart

async-await

dart

firebase

flutter