Title in Fluter Radial Gauge (SfRadialGauge)

23 Apr 20211 minute to read

You can define and customize the gauge title using the title property of SfRadialGauge. The text property of GaugeTitle is used to set text to the title.

The following properties are used to customize the appearance of title:

Text Alignment

You can align the title text content horizontally to the near, center, or far to the gauge using the alignment property oftitle.

  • dart
  • @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
         child: SfRadialGauge(
            title: GaugeTitle(text: 'SfRadialGauge', 
            backgroundColor: Colors.lightBlueAccent,
            textStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold, 
             fontStyle: FontStyle.italic,
             color: Colors.black, fontFamily: 'Times'),
            borderColor: Colors.indigo, borderWidth: 3, 
               alignment: GaugeAlignment.near),
            axes: <RadialAxis>[RadialAxis()],)
        ),
      );
    }

    Gauge title