Title in Flutter Radial Gauge (SfRadialGauge)

16 Jul 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,

• backgroundColor - Changes the background color.

• borderWidth – Changes the border width.

• borderColor – Changes the border color.

• textStyle - Changes the text color, size, font family, fontStyle, and font weight.

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()],)
    ),
  );
}