Flutter：根据父级的变化更新子级状态

Question

NOTE: The code may seem very long, but for this question you don't need to understand every part of it.

I have an app, which gets data from an API to build a chart with it. I use the Syncfusion cartesian chart package. This is an economic indicator, so it brings a date and a value, for example:

[[2015 Oct, 0.24],[2015 Nov, 0.26],[2015 Dec, 0.32],[2016 Jan, 0.35],[2016 Feb, 0.40],[2016 Mar, 0.48]]

So, once the data arrives (It has a loading screen for waiting the data form the HTTP request), I build the chart with it.

So in this case, my Parent widget is named ChartScreen. Here's the code:

class ChartScreen extends StatefulWidget {

  @override
  State<ChartScreen> createState() => _ChartScreenState();
}

class _ChartScreenState extends State<ChartScreen> {

 String dropdownValue = '';

  initState() {
    dropdownValue = '2016';
    return super.initState();
  }

  @override
  Widget build(BuildContext context) {

    final enterpriseProvider = Provider.of<EnterpriseProvider>(context);
    final resp = enterpriseProvider.indicator;
    List<IpcData> data = _createIpcList(resp, dropdownValue);

    if( data.length == 0 ) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Obteniendo datos...'),
        ),
        body: Container(
          color: Colors.black,
          width: double.infinity,
          height: double.infinity,
          child: Center(
            child: CircularProgressIndicator(),
          ),
        ),
      );
    }

    return 
    Scaffold(
      appBar: AppBar(
        title: Text('IPC'),
        actions:[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: DropdownButton(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: const TextStyle(color: Colors.white),
              underline: Container(
                height: 2,
                color: Colors.white,
              ),
              onChanged: (String? newValue) {
                dropdownValue = newValue!;
                data = _createIpcList(resp, dropdownValue);
                setState(() {});
              },
              items: <String>['2016', '2017', '2018', '2019']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList()
            ),
          )
        ] 
      ),
      drawer: SideMenu(),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Container(
              child: ResultChart( formattedData: data )###############################
            ),
          ),
        ],
      )
    );
  }

  _createIpcList(List<List<dynamic>> resp, [String? year]) {

    print('EL AÑOO');
    print(year);

    List<IpcData>finalList = [];

    if(resp.length != 0) {

      for(int i = 0; i < resp.length; i++) {
        
        try {
          resp[i][0] = DateFormat.yMMM().format(DateTime.parse(resp[i][0]));
        } catch(e) {}

      }

    }

    List<IpcData> ipcList = resp.map((e) => IpcData(e[0], e[1])).toList();

    if (year!= null) {
      for(int i = 0; i < ipcList.length; i++){      
        if (ipcList[i].date.contains(year)){
          finalList.add(ipcList[i]);
        }
      }
    }

    return finalList;

  }
} 

With the _createIpcList I format the JSON data, so the chart can use it. I highlighted the line in which I call the child whose state I want to update. But before that, you can se that I added a dropdown menu, to select a year from a (hardcoded) list. When the dropdown menu selected item changes (see onChanged), I call the SetState and pass the 'year parameter' to the _createIpcList, which filters the data and returns the items that belong to the selected year. Here's the child code:

class ResultChart extends StatefulWidget {

  final List<IpcData> formattedData;

  const ResultChart({
    Key? key, 
    required this.formattedData
  }) : super(key: key);

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

class _ResultChartState extends State<ResultChart> {


  late List<IpcData> _chartData;

  @override
  void initState() {
    _chartData = widget.formattedData;
    super.initState();
  }


  @override
  Widget build(BuildContext context) {

    return Container(
      child: SfCartesianChart(
        backgroundColor: Colors.black,
        enableAxisAnimation: false,
        trackballBehavior: TrackballBehavior(
          enable: true,
          shouldAlwaysShow: true,
          tooltipSettings: InteractiveTooltip(
            borderWidth: 2,
            borderColor: Colors.grey,
            color: Colors.grey[400],
            format: 'point.x : point.y'
          )
        ),
        zoomPanBehavior: ZoomPanBehavior(
          enablePanning: true,
          enablePinching: true,
          enableDoubleTapZooming: true,
          zoomMode: ZoomMode.xy,
        ),
        primaryXAxis: CategoryAxis(
          labelRotation: 90,
          labelStyle: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.grey[400]
          ),
          axisLine: AxisLine(
            width: 2,
            color: Colors.grey
          ),
          majorGridLines: MajorGridLines(width: 1),
        ),
        primaryYAxis: NumericAxis(
          labelStyle: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.grey[400]
          ),
          axisLine: AxisLine(
            width: 2,
            color: Colors.grey
          ),
          title: AxisTitle( text: 'IPC', textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          majorGridLines: MajorGridLines(width: 1),
        ), 
        series: <ChartSeries>[
        LineSeries<IpcData, String>( 
          color: Colors.blue,
          dataSource: _chartData,
          xValueMapper: (IpcData data, _) => data.date,
          yValueMapper: (IpcData data, _) => data.value
        )
      ],)
    );
  }
}

class IpcData {

  final String date;
  final double value;

  IpcData(this.date, this.value);

}

My problem is that, no matter which year I select, the chart doesn't change. I know that the 'dropdownValue' changes because I debugged with some prints() but I don´t know how to rebuild or set state of the ResultChart widget.

Answer 1

Well it turn out that I continued debugging, and actually the ResultChart Widget was being rebuilt again and again, but I never called the setState fuction inside the children. Beginner error I know, but I'm new with Flutter. Also sorry for my english, I'm Argentinian