Fl_chart: PieChart recent update 0.12.1 throws exception when pie slice is tapped

Created on 13 Dec 2020  ·  8Comments  ·  Source: imaNNeoFighT/fl_chart

Describe the bug
PieChart recent update 0.12.1 throws exception when pie is tapped, however it works fine with version 0.12.0

To Reproduce
Tap Pie Chart, when the pie slice tries to enlarge exception is thrown, after that you cannot tap the slices anymore

Screenshots
======== Exception caught by widgets library
The following assertion was thrown building PieChart(duration: 150ms, dirty, dependencies: [MediaQuery, _EffectiveTickerMode], state: _PieChartState#9a568(ticker inactive)):
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().
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1792 pos 13: 'debugDoingThisResize || debugDoingThisLayout ||
(RenderObject.debugActiveLayout == parent && _size._canBeUsedByParent)'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md

The relevant error-causing widget was:
PieChart
When the exception was thrown, this was the stack:

2 RenderBox.size. (package:flutter/src/rendering/box.dart:1792:13)

3 RenderBox.size (package:flutter/src/rendering/box.dart:1805:6)

4 _PieChartState._getChartSize (package:fl_chart/src/chart/pie_chart/pie_chart.dart:210:33)

5 _PieChartState.badgeWidgets (package:fl_chart/src/chart/pie_chart/pie_chart.dart:160:23)

6 _PieChartState.build (package:fl_chart/src/chart/pie_chart/pie_chart.dart:154:16)

Versions

  • Flutter version 1.22.5
  • FlChart version 0.12.1
Pie Chart bug

Most helpful comment

The same error, I used SmartRefresher (pull_to_refresh) to include the chart, suspected to be unavailable in the sliver component

All 8 comments

I couldn't reproduce this error.
Please send a reproducible code.
Thanks!

Hi here is the full code to reproduce. It's throwing error with both FlChart version 0.12.1 and 0.12.2, but it works fine with v0.12.0:

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _scrollViewController = ScrollController(initialScrollOffset: 0.0);

  @override
  void dispose() {
    _scrollViewController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _buildAppBar(BuildContext context, bool isScrolled) {
      return <Widget>[SliverAppBar(title: Text('Test'), floating: true, pinned: false, snap: false)];
    }

    Widget buildBody() {
      return SingleChildScrollView(
        child: Padding(
          padding: EdgeInsetsDirectional.only(start: 5, end: 5, top: 5, bottom: 5),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [SizedBox(child: DonutChartAllTime(), height: 250)],
          ),
        ),
      );
    }

    return NestedScrollView(
      controller: _scrollViewController,
      floatHeaderSlivers: true,
      headerSliverBuilder: _buildAppBar,
      body: buildBody(),
    );
  }
}

class DonutChartAllTime extends StatefulWidget {
  @override
  _DonutChartAllTimeState createState() => _DonutChartAllTimeState();
}

class _DonutChartAllTimeState extends State<DonutChartAllTime> {
  List<DonutPieChartData> chartData;
  double _pieRadius = 40.0;
  double _chartHeight = 80;
  double _centerRadius = 0.0;
  double centerRadius = 50;
  double _totalAmount = 0.0;
  int _touchedIndex;

  @override
  void initState() {
    super.initState();
    chartData = _generateData();

    if (chartData.isNotEmpty) {
      chartData.forEach((element) {
        _totalAmount += element.value ?? 0.0;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(10),
        child: LayoutBuilder(builder: (context, constraints) {
          _chartHeight = constraints.maxHeight == double.infinity ? 200.0 : constraints.maxHeight;
          _centerRadius = (_chartHeight / 2) * centerRadius / 100;
          _pieRadius = (_chartHeight / 2) - _centerRadius;

          return SizedBox(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Flexible(
                    child: PieChart(
                      PieChartData(
                        pieTouchData: PieTouchData(touchCallback: (pieTouchResponse) {
                          setState(() {
                            if (pieTouchResponse.touchInput is FlLongPressEnd || pieTouchResponse.touchInput is FlPanEnd) {
                              _touchedIndex = -1;
                            } else {
                              _touchedIndex = pieTouchResponse.touchedSectionIndex;
                            }
                          });
                        }),
                        borderData: FlBorderData(show: false),
                        centerSpaceRadius: _centerRadius,
                        startDegreeOffset: 270,
                        sections: _buildPieSlices(),
                      ),
                    ),
                    flex: 2),
                SizedBox(width: 10),
                //Flexible(child: _buildLegend(), flex: 1),
              ],
            ),
          );
        }),
      ),
    );
  }

  List<PieChartSectionData> _buildPieSlices() {
    return chartData
        .asMap()
        .map(
          (index, it) {
            final isTouched = index == _touchedIndex;
            final _titleStyle = isTouched
                ? Theme.of(context).textTheme.headline6.copyWith(fontSize: 13)
                : Theme.of(context).textTheme.headline6;
            final radius = isTouched ? _pieRadius * 1.2 : _pieRadius;

            return MapEntry(
              index,
              PieChartSectionData(
                color: it.color,
                value: it.value / _totalAmount * 100,
                title: it.value.toString(),
                showTitle: true,
                radius: radius,
                titleStyle: _titleStyle,
              ),
            );
          },
        )
        .values
        .toList(growable: false);
  }

  List<DonutPieChartData> _generateData() {
    var _pieData = <DonutPieChartData>[
      DonutPieChartData(value: 10, legendText: 'A', color: Colors.green),
      DonutPieChartData(value: 30, legendText: 'B', color: Colors.blue),
      DonutPieChartData(value: 50, legendText: 'C', color: Colors.orange),
    ];

    return _pieData;
  }
}

class DonutPieChartData {
  final double value;
  final String legendText;
  Color color;

  DonutPieChartData({
    @required double value,
    @required String legendText,
    @required Color color,
  })  : value = value ?? 0.0,
        legendText = legendText ?? '',
        color = color ?? Colors.white;
}

The same error, I used SmartRefresher (pull_to_refresh) to include the chart, suspected to be unavailable in the sliver component

Same issue
fl_chart: 0.12.2.
flutter version: stable - 1.22.5

Fixed in 0.12.3.
Thanks all for contributing!

It's not really fixed rather made it worse, after v0.12.3 the chart disappears with the same example code above. Check the result below with both v0.12.0 and v0.12.3( same is the case with v0.20.1)
Reproducible code https://github.com/imaNNeoFighT/fl_chart/issues/514#issuecomment-751145747
image

It's not really fixed rather made it worse, after v0.12.3 the chart disappears with the same example code above. Check the result below with both v0.12.0 and v0.12.3( same is the case with v0.20.1)
Reproducible code #514 (comment)
image

I had a similar issue, which I fixed by adding fit: StackFit.expand, to my containing Stack.

It's not really fixed rather made it worse, after v0.12.3 the chart disappears with the same example code above. Check the result below with both v0.12.0 and v0.12.3( same is the case with v0.20.1)
Reproducible code #514 (comment)

I had a similar issue, which I fixed by adding fit: StackFit.expand, to my containing Stack.

Thanks for the hint. I am not using any Stack, however using slivers, you can check the example code given above, would be helpful if someone was able it fix it.
@imaNNeoFighT can you check the given example, if it's not working for you, it means the issue is still open

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexodus picture alexodus  ·  3Comments

BadReese picture BadReese  ·  6Comments

wukongssl picture wukongssl  ·  3Comments

xSILENCEx picture xSILENCEx  ·  4Comments

atreeon picture atreeon  ·  4Comments