Pie Chart disappears when "defaultRenderer: charts.ArcRendererConfig" is added to Charts in Flutter

Question

I am completely new to Flutter, but I need to develop a mobile app for a university project using Flutter & Dart. I want to add a Pie Chart to my application and so I imported the flutter_charts package. I have gotten it to sort of work. Below is the code currently which produces a working result.

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:sa_voting_app/Charts/main_series.dart';

class VoterChart extends StatelessWidget {
  const VoterChart({Key? key, required this.data}) : super(key: key);

  final List<VoterSeries> data;

  @override
  Widget build(BuildContext context) {
    List<charts.Series<VoterSeries, String>> series = [
      charts.Series(
          id: "Voters",
          data: data,
          domainFn: (VoterSeries series, _) => series.party,
          measureFn: (VoterSeries series, _) => series.voters,
          colorFn: (VoterSeries series, _) => series.barColor)
    ];

    return Container(
      height: MediaQuery.of(context).size.height,
      padding: const EdgeInsets.all(20),
      child: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Text(
                  "Current Leader Board for Parties:",
                  style: Theme.of(context).textTheme.bodyText1,
                ),
                Expanded(
                  child: charts.PieChart(series,animate: true),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

It produces the following output:

I want to then add labels to the PieChart. So I googled a few tutorials and came up with this code:

Expanded(
 child: charts.PieChart(series,
  defaultRenderer: charts.ArcRendererConfig(
   customRendererId: 'mainChartRender',
   arcRendererDecorators: [
    charts.ArcLabelDecorator(
     labelPosition: charts.ArcLabelPosition.inside),
    ],
   ),
  animate: true),
),

However as soon as I add this code and try to run my application again the following happens:

As you can see the Chart dissapears, I also get an exception in the box.dart file which appears as follows:

This is the code where the exception appears:

Size get size {
assert(hasSize, 'RenderBox was not laid out: ${toString()}');
assert(() {
  final Size? _size = this._size;
  if (_size is _DebugSize) {
    assert(_size._owner == this);
    if (RenderObject.debugActiveLayout != null &&
        !RenderObject.debugActiveLayout!.debugDoingThisLayoutWithCallback) {
      assert(
        debugDoingThisResize || debugDoingThisLayout || _computingThisDryLayout ||
          (RenderObject.debugActiveLayout == parent && _size._canBeUsedByParent),
        'RenderBox.size accessed beyond the scope of resize, layout, or '
        'permitted parent access. RenderBox can always access its own size, '
        'otherwise, the only object that is allowed to read RenderBox.size '
        'is its parent, if they have said they will. It you hit this assert '
        'trying to access a child\'s size, pass "parentUsesSize: true" to '
        "that child's layout().",
      );
    }
    assert(_size == this._size);
  }
  return true;
}());
return _size!;
}

---

I have tried looking at various places online to try and get a solution, but most stuff that references the "Render Box was not laid out error" is in regards to putting a ListView/GridView into a Column/Row. There was two of the following posts that reference similar issues: Flutter GoogleChart Pie chart does not render (I followed the very few solutions suggested here, but none yielded results.) There was also this post, but again its suggested solutions did not fix my issue.

Being new to Flutter I do not have any idea where to even begin troubleshooting. I would greatly appreciate it if someone could guide me in the right direction or help explain what exactly is causing the error. Thank you very much in advance for your time.

Answer 1

I faced similar issue as well. I don't know why but it happens when we use defaultRenderer

After searching on google a bit I found a work around. I don't know why it works, but it worked in my case at least. Here is link to Source

You have to add the type parameter of the PieChart

so as you have series of type charts.Series<VoterSeries, String>> you updated code should look like

Expanded(
 child: charts.PieChart<String>(series,
  defaultRenderer: charts.ArcRendererConfig(
   customRendererId: 'mainChartRender',
   arcRendererDecorators: [
    charts.ArcLabelDecorator(
     labelPosition: charts.ArcLabelPosition.inside),
    ],
   ),
  animate: true),
),

Notice a type parameter <String> is added in

child: charts.PieChart<String>(series,

Hope it helps.