Guidance on how to scale radial gauge based on parent widget
Hi,
thanks for your awesome flutter library and providing the community license. I need some support scaling a radial gauge based on the parent widget. Many things are working out-of-the-box using GaugeSizeUnit.factor - but some are not. Here is there I need some guidance:
- How to set size (width and height) of a MarkerPointer so it would fit in case I put the radial gauge into a 200x200 container as well as a 400x400 container?
- How to set font size for GaugeAnnotation so it would scale dependent on parent size?
- How to set adjust your example 'Setting image for annotation' (https://help.syncfusion.com/flutter/radial-gauge/annotation#setting-image-for-annotation) to show up properly in a e.g. 200x200 container as well as a 400x400 container?
Thanks in advance!
Michael
SIGN IN To post a reply.
1 Reply
1 reply marked as answer
SK
Sriram Kiran Senthilkumar
Syncfusion Team
October 19, 2020 12:41 PM UTC
Hi Micheal,
Greetings from Syncfusion. We have analyzed on your queries and provided the responses for them below.
Query #1: (How to set size (width and height) of a MarkerPointer so it would fit in case I put the radial gauge into a 200x200 container as well as a 400x400 container?)
We have analyzed on the above scenario and we would like to share some information regarding the MarkerPointer. Currently, we do not have support to set factor value for marker’s width and height. We can set only the pixel value to marker’s width and height. However, using a simple workaround we can change the size marker pointer based on parent container size. To achieve this, we have used the LayoutBuilder as the child widget for the parent container of some size (say 400x400) and we have returned the radial gauge in the builder of the layout builder. So, now for changing the size of the MarkerPointer of the SfRadialGauge based on the parent container size, we have used the size constraints from the layout builder which returns the size of the parent container and used those constraints to set the value for the markerWidth and markerHeight properties of MarkerPointer. Please check the code snippet below for further reference.
|
Container(
// parent container size(400x400)
height: 400,
width: 400,
// Layout builder as child of parent container
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// returned radial gauge widget in layout builder
return SfRadialGauge(axes: <RadialAxis>[
RadialAxis(
minimum: 0,
maximum: 150,
pointers: <GaugePointer>[
MarkerPointer(
value: 60,
// Got the height constraints of parent conatiner
// and divided it by 10 (i.e., 10 % of parent's height as marker height)
markerHeight: constraints.maxHeight / 10,
// Got the height constraints of parent conatiner and
// divided it by 10 (i.e., 10 % of parent's width as marker width)
markerWidth: constraints.maxWidth / 10,
)
],
)
]);
}),
), |
The sample for reference can be found below.
Please check with the sample and revert us if you still have further concerns.
Query #2: (How to set font size for GaugeAnnotation so it would scale dependent on parent size?)
We have analyzed on the above scenario and we would like to share some information regarding the GaugeAnnotaion available in SfRadialGauge widget. GaugeAnnotation does not have font size property. Any widget set to widget property of the GaugeAnnotation is simply placed on the gauge. So, if you want to customize the font size, you need to set size property of the native widget accordingly (For example: Font size property of Text widget). Please check the snippet below for reference.
|
SfRadialGauge(
axes: <RadialAxis>[RadialAxis(
annotations: <GaugeAnnotation>[
GaugeAnnotation(
// Text widget as annonation and it for size can be set using is TextStyle.fontSize property.
widget: Text(
'50.0',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20
),
))]
)
) |
Query #3: (How to set adjust your example 'Setting image for annotation' (https://help.syncfusion.com/flutter/radial-gauge/annotation#setting-image-for-annotation) to show up properly in a e.g. 200x200 container as well as a 400x400 container?)
We have analyzed on the above scenario and in order to adjust the size of the widget(image) set to the widget property of GaugeAnnotation, you can use the same workaround scenario we have proposed in query-#1 which is by using the LayoutBuilder size constraints to adjust the size of the image based on the parent container’s size. Please refer the code snippet below for further reference.
|
Container(
// parent container size(400x400)
color: Colors.white,
height: 400,
width: 400,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
minimum: 0,
maximum: 150,
annotations: [
GaugeAnnotation(
widget: Container(
// provided height and width for the image using the size constraints
width: constraints.maxWidth / 10,
height: constraints.maxHeight / 10,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage('images/sun.png'),
fit: BoxFit.fitHeight,
),)))
],
)
]
);
}),
) |
Please check with the above responses for your queries and revert us if you would require further assistance.
Regards,
Sriram Kiran
Marked as answer
SIGN IN To post a reply.
