How to add a widget inside the Flutter radial gauge widget (SfRadialGauge)
Description
This article describes how to add a widget inside the Flutter radial gauge widget.
Solution
You can add the multiple widget to annotate the specific point of interest in the radial gauge by using the annotations property of radial axis.
Step 1: Create the radial gauge widget and add a radial axis.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(),
],
)),
);
}
Step 2: Create a GaugeAnnotation and add it to the annotations list of radial axis.
axes: <RadialAxis>[ RadialAxis(annotations: <GaugeAnnotation>[GaugeAnnotation()]) ],
Step 3: To place the gauge annotation in the direction corresponding to the angle 270, set the angle property as 270 or you can specify the direction corresponding to the axis value using the axisValue property.
axes: <RadialAxis>[ RadialAxis( annotations: <GaugeAnnotation>[GaugeAnnotation(angle: 270)]) ],
Step 4: Set the positionFactor property of gauge annotation to customize the position of the annotation from the center location in the provided angle direction.
axes: <RadialAxis>[ RadialAxis(annotations: <GaugeAnnotation>[ GaugeAnnotation(angle: 270, positionFactor: 0.1) ]) ],
Step 5: Set the desired widget to the widget property of annotation to display a widget in the radial gauge widget.
axes: <RadialAxis>[
RadialAxis(annotations: <GaugeAnnotation>[
GaugeAnnotation(
widget: Column(
children: <Widget>[
Container(
width: 50.00,
height: 50.00,
decoration: const BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('images/sun.png'),
fit: BoxFit.fill,
),
)),
Padding(
padding: const EdgeInsets.fromLTRB(0, 2, 0, 0),
child: Container(
child: Text('73°F',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25)),
),
)
],
),
angle: 270,
positionFactor: 0.1)
])
],
Output:
You can download the sample from this link
