charts_flutterでsetStateするとLinePointHighlighterが保持されにゃい2023-03-13

🐈 やりたいこと

setStateするとLinePointHighlighterが未選択状態に戻されてしまう

Chart doesn't maintain state
https://github.com/google/charts/issues/286

折れ線グラフの点と縦点線が消える


・・・🐈‍⬛・・・🐈‍⬛・・・🐈‍⬛・・・


behaviorsInitialSelection(shouldPreserveSelectionOnDraw:true)を追加する

behaviors : [
  LinePointHighlighter(),
  InitialSelection(selectedDataConfig:[chart.SeriesDatumConfig<String>(Seriesのid, 選択中のdomainFn)], shouldPreserveSelectionOnDraw:true),
],
  • InitialSelection : 初期表示時に選択中にする
  • shouldPreserveSelectionOnDraw : 再描画時に選択中を保持する


🐾 全体像
class Chart extends StatefulWidget
{
  const Chart({super.key});

  @override
  State<Chart> createState() => _ChartState();
}

class _ChartState extends State<Chart>
{
  String current = '2023';

  @override
  Widget build(BuildContext context) => chart.OrdinalComboChart(
    [
      chart.Series<ChartData, String>(
        id        : 'chart_id',
        domainFn  : (ChartData data, _) => data.year,
        measureFn : (ChartData data, _) => data.value,
        data      : chartData,
      ),
    ],
    behaviors : [
      chart.LinePointHighlighter(),
      chart.InitialSelection(selectedDataConfig:[chart.SeriesDatumConfig<String>('chart_id', current)], shouldPreserveSelectionOnDraw:true),
    ],
    selectionModels : [
      chart.SelectionModelConfig(changedListener:(chart.SelectionModel model) {
        setState(() {
          if (model.hasDatumSelection) current =  model.selectedDatum[0].datum;
        }); 
      }),
    ],