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,
  ),
)

标签： chartsflutterdart

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