Flutter中Charts添加“defaultRenderer: charts.ArcRendererConfig”后Pie Chart消失

Question

我对 Flutter 完全陌生，但我需要使用 Flutter & Dart 为大学项目开发​​一个移动应用程序。我想在我的应用程序中添加一个饼图，所以我导入了 flutter_charts 包。我已经开始工作了。下面是当前产生工作结果的代码。

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),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

它产生以下输出：

然后我想向饼图添加标签。所以我用谷歌搜索了一些教程并想出了这段代码：

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

但是，一旦我添加此代码并尝试再次运行我的应用程序，就会发生以下情况：

如您所见，图表消失了，我在 box.dart 文件中也出现异常，如下所示：

这是出现异常的代码：

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!;
}

---

我曾尝试在网上查看各个地方以尝试获得解决方案，但大多数引用“渲染框未布局错误”的内容都是关于将 ListView/GridView 放入列/行中的。以下帖子中有两个提到了类似的问题：Flutter GoogleChart Pie chart does not render（我遵循了这里建议的极少数解决方案，但没有一个产生结果。）还有 this post，但它建议的解决方案同样没有解决我的问题。

作为 Flutter 的新手，我什至不知道从哪里开始进行故障排除。如果有人能指导我正确的方向或帮助解释到底是什么导致了错误，我将不胜感激。非常感谢您抽出宝贵时间。

Answer 1

我也遇到了类似的问题。 我不知道为什么，但是当我们使用 defaultRenderer 时会发生这种情况

在谷歌上搜索了一下后，我找到了解决方法。 我不知道它为什么有效，但至少在我的情况下有效。 Here is link to Source

您必须添加饼图的类型参数

所以当你有charts.Series<VoterSeries, String>>类型的系列时，你更新的代码应该看起来像

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

注意类型参数<String>被添加到

child: charts.PieChart<String>(series,

希望能帮助到你。