title: Slow performance on scroll with flutter charts
body: <p>I have a <code>DraggableScrollableSheet</code> with a <code>ListView</code>, and inside that some flutter charts. When the draggable scrollable sheet go from <code>minChildSize</code> to <code>maxChildSize</code> the charts are constantly rebuilt, so it's laggy and with poor performance.</p>
  
  <p>In <a href="https://youtu.be/xYoXYj4M7cM" rel="nofollow noreferrer">this video</a>, you can see what I mean. This is from the android emulator but is the same on my Huawei P30 Pro</p>
  
  <p>This is the code:</p>
  
  <pre class="lang-dart prettyprint-override"><code>class SummaryPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Stack(
        // alignment: Alignment.topCenter,
        children: &lt;Widget&gt;[
          Column(
            children: &lt;Widget&gt;[
              const SizedBox(
                height: 120.0,
              ),
              const SizedBox(height: 24.0),
              CountrySelector(),
              const SizedBox(height: 24.0),
              ConfirmedCases(),
              const SizedBox(height: 24.0),
              DiseaseSummary(),
            ],
          ),
          DraggableScrollableSheet(
            maxChildSize: 1.0,
            initialChildSize: 0.4,
            minChildSize: 0.4,
            expand: true,
            builder: (ctx, scrollController) =&gt;
                NotificationListener&lt;OverscrollIndicatorNotification&gt;(
              onNotification: (overscroll) {
                overscroll.disallowGlow();
                return null;
              },
              child: ListView(
                controller: scrollController,
                children: [
                  SummaryCharts(),
                ],
              ),
            ),
          ),
        ],
      );
    }
  }
  
  
  class SummaryCharts extends StatelessWidget {
    const SummaryCharts({
      Key key,
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Column(
        children: &lt;Widget&gt;[
          Container(width: double.infinity, height: 200, color: Colors.red),
          Container(
            padding: const EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: Column(
              children: &lt;Widget&gt;[
                ProgressChart(),
                SizedBox(
                  height: 16.0,
                ),
                ProgressChart(),
                SizedBox(
                  height: 16,
                ),
                ProgressChart(),
              ],
            ),
          ),
        ],
      );
    }
  }
  
  
  class ProgressChart extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return PhysicalShape(
        elevation: 5,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        color: Colors.transparent,
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(32.0))),
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: &lt;Widget&gt;[
                  Text(
                    'DATA HISTORY',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 12.0,
                    ),
                  ),
                  Row(
                    children: &lt;Widget&gt;[
                      Row(
                        children: &lt;Widget&gt;[
                          Container(
                            width: 16.0,
                            height: 16.0,
                            decoration: BoxDecoration(
                              color: Theme.of(context).primaryColor,
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 4.0),
                            child: Text(
                              'Confirmed',
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 9.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          )
                        ],
                      ),
                      SizedBox(
                        width: 12.0,
                      ),
                      Row(
                        children: &lt;Widget&gt;[
                          Container(
                            width: 16.0,
                            height: 16.0,
                            decoration: BoxDecoration(
                              color: Color(0xFF69FF98),
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 4.0),
                            child: Text(
                              'Recovered',
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 9.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  )
                ],
              ),
              Container(
                height: 250,
                padding: const EdgeInsets.only(top: 12.0),
                child: BlocBuilder&lt;CovidStatisticsBloc, CovidStatisticsState&gt;(
                  builder: (ctx, state) =&gt; charts.TimeSeriesChart(
                    _createSeries(
                      ctx,
                      state.stats.historicalConfirmed,
                      state.stats.historicalRecovered,
                    ),
                    animate: false,
                    customSeriesRenderers: [
                      charts.LineRendererConfig(
                        customRendererId: 'cases_series',
                        includeArea: true,
                        includePoints: true,
                        radiusPx: 4.0,
                        areaOpacity: 0.4,
                      ),
                      charts.LineRendererConfig(
                        customRendererId: 'recovered_series',
                        includeArea: true,
                        includePoints: true,
                        radiusPx: 4.0,
                        areaOpacity: 0.4,
                      )
                    ],
                    domainAxis: charts.DateTimeAxisSpec(
                      renderSpec: charts.SmallTickRendererSpec(
                        labelStyle: charts.TextStyleSpec(
                          fontFamily: 'Mali',
                          fontSize: 12,
                          lineHeight: 2,
                          color: charts.Color(
                            a: 0xFF,
                            r: 0x68,
                            g: 0x81,
                            b: 0x8F,
                          ),
                        ),
                        lineStyle: charts.LineStyleSpec(
                          thickness: 5,
                          color: charts.Color(
                            a: 0xFF,
                            r: 0xCD,
                            g: 0xD5,
                            b: 0xDA,
                          ),
                        ),
                      ),
                    ),
                    primaryMeasureAxis: charts.NumericAxisSpec(
                      tickFormatterSpec: charts.BasicNumericTickFormatterSpec(
                          (value) =&gt; NumberFormat.compact().format(value)),
                      renderSpec: charts.SmallTickRendererSpec(
                        labelStyle: charts.TextStyleSpec(
                          fontFamily: 'Mali',
                          fontSize: 12,
                          lineHeight: 2,
                          color: charts.Color(
                            a: 0xFF,
                            r: 0x68,
                            g: 0x81,
                            b: 0x8F,
                          ),
                        ),
                        lineStyle: charts.LineStyleSpec(
                          thickness: 5,
                          color: charts.Color(
                            a: 0xFF,
                            r: 0xCD,
                            g: 0xD5,
                            b: 0xDA,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    }
  }
  
  </code></pre>