CODEWITHSUNDEEP
flutterchartsflutter-layout
Anirudh Bagri
Anirudh Bagri

Reputation: 2447

Flutter charts, Place a text at center

I am using Flutter Charts to create a doughnut chart. I want to place a text inside the doughnut, along with a legend.

I tried using a Center Widget inside a Stack Widget but it doesn't put the text at the centre if I add a DatumLegend as a behaviour to the charts. If I remove the legend, it shows the text at the correct position.

My code from charts is:

Stack(
  children: <Widget>[
    charts.PieChart(
      getseriesList(_values),
      animate: true,
      defaultRenderer: charts.ArcRendererConfig(
          arcWidth: 40,
          arcRendererDecorators: [
            charts.ArcLabelDecorator(
                labelPosition: charts.ArcLabelPosition.outside)
          ]),
      defaultInteractions: true,
      behaviors: [
        charts.DatumLegend(
          position: charts.BehaviorPosition.bottom,
          desiredMaxColumns: 4,
          legendDefaultMeasure: charts.LegendDefaultMeasure.none,
        ),
      ],
    ),
    Center(
      child: Container(
        margin: EdgeInsets.only(top: 4),
        child: Text(
          'CenterText',
          style: TextStyle(
            color: Colors.black38,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
    ),
  ],
)

Here, I want the 99 to be placed at the center. .

Upvotes: 2

Views: 3647

Answers (2)

Luiz Filipe Medeira
Luiz Filipe Medeira

Reputation: 1320

Use alignment: Alignment.center from Stack.

Stack(
    alignment: Alignment.center,
    children: [
      SizedBox(
        width: 200,
        height: 200,
        child: pieCard(widget.items),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(label),
          Text('R\$ 2.500,0'),
        ],
      ),
    ],
  );

Upvotes: 2

Sanket Vekariya
Sanket Vekariya

Reputation: 2956

Use Positioned widget instead center in stack.
To keep widget center horizontal:

Positioned(
    left : 0,
    right : 0,
    child : <your widget>,
)

To keep widget center vertical:

Positioned(
    top : 0,
    bottom : 0,
    child : <your widget>,
)

This works for me :)

Upvotes: 0

Related Questions