SyncFusion Flutter Gauge

Question

I am currently using the SyncFusion Flutter Radial Gauge. I have assigned the GaugeTitle, and it appears at the top of the screen. I wanted to know how I can move it down so that it can appear right above the gauge. Here is my code:

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(
            'Speedometer',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
        body: Center(
          child: SfRadialGauge(
              title: GaugeTitle(
                  text: 'Speed Level', alignment: GaugeAlignment.center),
              enableLoadingAnimation: true,
              axes: <RadialAxis>[
                RadialAxis(
                  pointers: <GaugePointer>[
                    NeedlePointer(value: 90, enableAnimation: true),
                  ],
                  annotations: <GaugeAnnotation>[
                    GaugeAnnotation(
                        widget: Text(
                          '90.0',
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),
                        positionFactor: 0.5,
                        angle: 90),
                  ],
                ),
              ]),
        ),
      ),
    );
  }
}

Answer 1

You can place the title just above the gauge using the center property. By default, gauge positioned at the center of the available size because the default values of centerX and centerY are 0.5. Now you can adjust the centerY value to reduce space between the title and gauge.

Link: https://help.syncfusion.com/flutter/radial-gauge/axes

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(
            'Speedometer',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
        body: Center(
          child: SizedBox(
            height: 500,
            width: 300,
            child: SfRadialGauge(
              title: const GaugeTitle(
                  text: 'Speed Level', alignment: GaugeAlignment.center),
              enableLoadingAnimation: true,
              axes: <RadialAxis>[
                RadialAxis(
                  centerY: 0.3,
                  pointers: <GaugePointer>[
                    const NeedlePointer(value: 90, enableAnimation: true),
                  ],
                  annotations: <GaugeAnnotation>[
                    GaugeAnnotation(
                        widget: const Text(
                          '90.0',
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),
                        positionFactor: 0.5,
                        angle: 90),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Also, you can add title using Text widget instead of using GaugeTitle. Arrange the Text widget and SfRadialGauge to the Stack widget as per your requirement.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(
            'Speedometer',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              const Text('Speed Level'),
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: SfRadialGauge(
                  enableLoadingAnimation: true,
                  axes: <RadialAxis>[
                    RadialAxis(
                      pointers: <GaugePointer>[
                        NeedlePointer(value: 90, enableAnimation: true),
                      ],
                      annotations: <GaugeAnnotation>[
                        GaugeAnnotation(
                            widget: const Text(
                              '90.0',
                              style: TextStyle(
                                  fontSize: 20.0, fontWeight: FontWeight.bold),
                            ),
                            positionFactor: 0.5,
                            angle: 90),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

You can wrap Text widget inside stack and place it wherever you want.