Flutter：使用提供程序 package 在帧错误期间计划构建

Question

Hey guys I need help in de-bugging what is going on. I get the following error (below). I am new to flutter and any help would be appreciated. What I am trying to do here is that anytime someone double clicks on the chart (using the cross hair functionality), it creates a new data point and re-draws the chart. Thank you!

Error: ════════ Exception caught by foundation library ════════════════════════════════ The following assertion was thrown while dispatching notifications for PlotData: Build scheduled during frame. While the widget tree was being built, laid out, and painted, a new frame was scheduled to rebuild the widget tree.

All my Code:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This tokwidget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => PlotData()),
      ],
      child: Consumer<PlotData>(builder: (context, plotData, _) {
        return MaterialApp(
          home: FirstPage(),
        );
      }),
    );
  }
}

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

class PlotData extends ChangeNotifier {
  List<SalesData> data = [
    SalesData('Jan', 35),
    SalesData('Feb', 28),
    SalesData('Mar', 34),
    SalesData('Apr', 32),
    SalesData('May', 40)
  ];
  void addData(List selectedPoint) {
    print("Current Length of data: " + data.length.toString());
    List<SalesData> addPoint = [
      SalesData(selectedPoint[0], double.parse(selectedPoint[1]))
    ];
    data = data + addPoint;
    print("Now Data has Length of: " + data.length.toString());
    notifyListeners();
  }

  List<SalesData> get allData => data;
}

class VolumeChart extends StatelessWidget {
// Holds the selected points by the user
  List selectedPoint = [];
//VolumeChart(this.data);
  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      onCrosshairPositionChanging: (CrosshairRenderArgs args) {
// Crosshair calls this function twice, once for the x,y values respectively
// we capture the full data point string in a list that empties itself when new points are selected
        if (selectedPoint.length == 2) {
          selectedPoint = [];
        }
        selectedPoint.add(args.value); // save the coordinates of the point
// @TODO delete this later, used for prinitng coordinates
        if (selectedPoint.length == 2) {
          Provider.of<PlotData>(context, listen: false).addData(selectedPoint);
//print(selectedPoint.toString());
        }
      },
// Enables the tooltip for all the series in chart
      crosshairBehavior: CrosshairBehavior(
          activationMode: ActivationMode.doubleTap, enable: true),
// Initialize category axis
      primaryXAxis: CategoryAxis(),
      series: <ChartSeries>[
// Initialize line series
        LineSeries<SalesData, String>(
// Enables the tooltip for individual series
            enableTooltip: true,
            dataSource: Provider.of<PlotData>(context, listen: true).allData,
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.sales),
      ],
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        VolumeChart(),
      ],
    );
  }
}

Answer 1

You don't need to call an instance of the provider with a listen: true , because that is the default value.

I will recommend that you avoid using a consumer as the direct descendent of the MaterialApp and do this instead;

class MyApp extends StatelessWidget {
// This tokwidget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => PlotData()),
      ],
      child:  MaterialApp(
          home: FirstPage.create(context),

      }),
    );
  }
}

Then implement FirstPage as follows;

class FirstPage extends StatelessWidget {
   final PlotData plotData; 
   FirstPage({@required this.plotData});

  static Widget create(BuildContext context){
       final plotDataInstant = Provider.of<PlotData>(context, listen: false);
       return FirstPage(plotData: plotDataInstant);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        VolumeChart(),
      ],
    );
  }
}

I hope this helps!