Как добавить текст внутри отверстия круговой диаграммы пончика во флаттере

Question

Я хотел бы добавить центрированный текст в середине круговой диаграммы отверстия пончика во флаттере, как показано ниже:

Я использую 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
          ),
        ),
      )
    ],
)

Answer 2

Вы можете использовать стек на PieChart

return Stack(
  children: <Widget>[
    new charts.PieChart(
      _project.getExpensesToChartSeries(),
      animate: animate,
      animationDuration: Duration(milliseconds: 500),
      selectionModels: [
        new charts.SelectionModelConfig(
          type: charts.SelectionModelType.info,
          changedListener: _onSelectionChanged,
      defaultRenderer: new charts.ArcRendererConfig(arcWidth: 25),
    ),
    Center(child: Text("bla bla")),
  ],
);