Flutter Google Chart Gauge - place label within ce

Question

I am looking at charts_flutter package. I need to implement a gauge chart, with a single segment and its label value at the gauge's center. See the mockup file below, where three charts from the required type are placed in a row:

Using Google chart gauge sample, I was able to implement the required gauge, however, I am struggling to set the label as per the requirement. Below is the class, I use for the gauge, any help / hints how to add the label would be greatly appreciated:

/// Gauge chart example, where the data does not cover a full revolution in the
/// chart.
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'dart:math';

class GaugeChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  GaugeChart(this.seriesList, {this.animate});

  factory GaugeChart.fromValue(
      {@required double value, @required Color color, bool animate}) {
    return GaugeChart(
      _createDataFromValue(value, color),
      // Disable animations for image tests.
      animate: animate,
    );
  }

  @override
  Widget build(BuildContext context) {
    return charts.PieChart(
      seriesList,
      animate: animate,
      // Configure the width of the pie slices to 30px. The remaining space in
      // the chart will be left as a hole in the center. Adjust the start
      // angle and the arc length of the pie so it resembles a gauge.
      defaultRenderer: charts.ArcRendererConfig(
        arcWidth: 20,
        startAngle: 3 / 5 * pi,
        arcLength: 9 / 5 * pi,
        //arcRendererDecorators: [charts.ArcLabelDecorator(labelPosition: charts.ArcLabelPosition.outside)],
      ),
    );
  }

  static List<charts.Series<GaugeSegment, String>> _createDataFromValue(
      double value, Color color) {
    double toShow = (1 + value) / 2;
    final data = [
      GaugeSegment('Main', toShow, color),
      GaugeSegment('Rest', 1 - toShow, Colors.transparent),
    ];

    return [
      charts.Series<GaugeSegment, String>(
        id: 'Segments',
        domainFn: (GaugeSegment segment, _) => segment.segment,
        measureFn: (GaugeSegment segment, _) => segment.value,
        colorFn: (GaugeSegment segment, _) => segment.color,
        // Set a label accessor to control the text of the arc label.
        labelAccessorFn: (GaugeSegment segment, _) =>
            segment.segment == 'Main' ? '${segment.value}' : null,
        data: data,
      )
    ];
  }
}

/// data type.
class GaugeSegment {
  final String segment;
  final double value;
  final charts.Color color;

  GaugeSegment(this.segment, this.value, Color color)
      : this.color = charts.Color(
            r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

This is how the class can be used:

// value can take values between -1 and 1
GaugeChart.fromValue(value: 0.34, color: Colors.red)

Answer 1

We achieved this using a Stack:

return Container(
    width: 120,
    height: 120,
    child: Stack(children: [
        GaugeChart(_getChartData()),
        Center(
            child: Text(
        '$percent',
        ))
    ]));