Widget flickers and disappears when scrolling

Question

I'm already losing sleep over this.

I'm trying to display a chart inside a ListView (for scrolling). For some reason the contents of the Card flickers when scrolling and randomly completely disappears (the Card itself stays visible though).

Any idea why would that happen?

(...) ListView (...)
children: [Row ( children: [buildChartBox()] )] (...)


Expanded buildChartBox() {
   return Expanded(
     child: Card(
       child: Padding(
         padding: const EdgeInsets.all(20.0),
         child: Column(
           children: [
             Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                 chartTitles(
                     title: 'Items',
                     subtitle: 'by value'),
                 SizedBox(
                     height: 300,
                     child: ValuesChart(data: calculateValues(items)))
               ],
             ),
           ],
         ),
       ),
     ),
   );
 }




Row chartTitles({String title = '', String subtitle = ''}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: text_charttitle),
            Text(subtitle, style: text_chartsubtitle),
          ],
        )
      ],
    );
  }
  

Things tried:

• Both of these were originally Stateless Widgets; I changed to simple methods to simplify but it didn't change the weird behaviour.
• Replacing the chartTitles return with an empty Container (ie removing the titles) does mitigate the issue. The chart then stays displayed but also flickers slightly .
• Replacing the ListView with a SingleChildScrollView doesn't change anything.

EDIT: Code for the ValuesChart:

import 'package:fl_chart/fl_chart.dart';

class ValuesChart extends StatelessWidget {
  final Map<String, int> data;

  const ValuesChart({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
        child: PieChart(
      _theData(data),
    ));
  }
}

Note I'm using a package called 'fl_chart'. _theData just returns various parameters for the chart, I don't think it's relevant.

Answer 1

Try to replace ListView with SingleChildScrollView

ListView s in flutter by default using what it is called in Android RecyclerView to efficiently use render resources. If you are interested here an article https://medium.com/1mgofficial/how-recyclerview-works-internally-71290de5d2c4