charts - 如何在 Flutter 的圆环饼图的孔内添加文本

Question

我想在 Flutter 中的环形孔饼图中间添加居中文本，如下图所示:

我正在使用 charts_flutter: ^0.6.0 这是我的代码:

new charts.PieChart(
  _project.getExpensesToChartSeries(),
  animate: _animate,
  animationDuration: Duration(milliseconds: 500),
  selectionModels: [
    new charts.SelectionModelConfig(
      type: charts.SelectionModelType.info,
      changedListener: _onSelectionChanged,
    )
  ],
  defaultRenderer: charts.ArcRendererConfig(
    arcWidth: 25,
  ),
)

Answer 1

您可以使用 Stack Widget堆叠内容并获得您期望的结果，如下所示:

Stack(
    children: <Widget>[
      charts.PieChart(
        _project.getExpensesToChartSeries(),
        animate: true,
        animationDuration: Duration(milliseconds: 500),
        selectionModels: [
          new charts.SelectionModelConfig(
            type: charts.SelectionModelType.info,
            changedListener: _onSelectionChanged,
          )
        ],
        defaultRenderer: charts.ArcRendererConfig(
          arcWidth: 25,
        ),
      ),
      Center(
        child: Text(
          "88%",
          style: TextStyle(
            fontSize: 30.0,
            color: Colors.blue,
            fontWeight: FontWeight.bold
          ),
        ),
      )
    ],
)