We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set a graphical frame image as a background for the radial gauge widget

Platform: Flutter |
Control: SfRadialGauge |
Published Date: April 2, 2020 |
Last Revised Date: April 2, 2020

Description

This article describes how to set a graphical frame image as background for the radial gauge widget.

Solution

You can show the graphical frame image as background for radial gauge with the backgroundImage property of radial axis.

The backgroundImage property of radial axis is a type of ImageProvider. Therefore, you can set the following types of image for backgroundImage property:

  1. AssetImage
  2. NetworkImage
  3. FileImage
  4. MemoryImage

The following steps explain how to set an AssetImage to backgroundImage property of the axis:

Step 1: Create a folder named as images and copy the desired image.

add image folder

Step 2:  To access the image added in the sample, you need to define the folder, which contains the image as assets in pubspec.yaml as like the following snippet.

include assets

Step 3:  Create the radial gauge widget and set the corresponding image, which needs to be displayed as the background image for the radial axis to its backgroundImage property as demonstrated in the following code example.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
            child: SfRadialGauge(
      axes: <RadialAxis>[
        RadialAxis(
          backgroundImage: const AssetImage('images/dark_theme_gauge.png'),
        )
      ],
    ))),
  );
}

 

Output:

 

Graphical frame background

 

You can download the demo sample from this link.

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile