Flutter: How do I create a semicircle on top of this widget

111

I think you would find this answer helpful:

https://stackoverflow.com/a/57748494/14531784

It creates a semi-circle using CustomPainter widget. Now, to place it on top of of you widget (SfRadialGauge) I think you could wrap that widget and the semi-circle with Stack widget.

Share:
111
noosh
Author by

noosh

Updated on January 05, 2023

Comments

  • noosh
    noosh 10 months
    import 'package:flutter/material.dart';
    import 'package:syncfusion_flutter_gauges/gauges.dart';
    
    class CreditScoreGauge extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.all(20),
          child: SfRadialGauge(
            axes: <RadialAxis>[
              RadialAxis(
                showLabels: false,
                showTicks: false,
                minimum: 300,
                maximum: 850,
                startAngle: 180,
                endAngle: 0,
                axisLineStyle: const AxisLineStyle(
                  thickness: 0.12,
                  cornerStyle: CornerStyle.bothCurve,
                  thicknessUnit: GaugeSizeUnit.factor,
                  color: Colors.blueAccent,
                  gradient: SweepGradient(colors: <Color>[
                    Color(0xffa2c9e1),
                    Color(0xff62769D),
                    Color(0xff354F81),
                    Color(0Xff1B3568),
                    Color(0xff122345),
                  ], stops: <double>[
                    0,
                    0.35,
                    0.7,
                    0.8,
                    1.0
                  ]),
                ),
                pointers: const <GaugePointer>[
                  MarkerPointer(
                      value: 600,
                      markerHeight: 25,
                      markerWidth: 25,
                      markerType: MarkerType.circle,
                      enableDragging: true,
                      color: Color.fromARGB(0, 3, 168, 244),
                      borderWidth: 7,
                      elevation: 10,
                      borderColor: Color.fromARGB(255, 255, 255, 255)),
                ],
              ),
            ],
          ),
        );
      }
    }
    

    This is my my widget using 'syncfusion_flutter_gauges: ^20.1.59' dependency that displays the following gauge:

    And my desired goal is the following:

    I want to add the semi circle depicted in the picture but I am having trouble with it. Can anybody help?