syncfusion_flutter_gauges 17.3.14-beta.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new90

Syncfusion Flutter Gauges #

Syncfusion flutter gauges library includes data visualization widgets such as radial gauge, which is written in dart, to create modern, interactive, and animated gauges that are used to craft high-quality mobile app user interfaces using Flutter.

Overview #

The radial gauge is used to display numerical values on a circular scale. It has a rich set of features such as axes, ranges, pointers, and annotations that are fully customizable and extendable. Using flutter radial gauge, we can create speedometer, temperature monitor, dashboard, meter gauge, multi-axis clock, gauge watch, modern activity gauge, direction compass, etc.

syncfusion_flutter_gauge_banner

Disclaimer: This is a commercial package. To use this package, you need to have either Syncfusion Commercial License or Syncfusion Community license. For more details, please check the LICENSE file.

Table of contents #

Radial gauge features #

  • Axes - The radial gauge axis is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements, such as labels, ticks, and axis line, can be easily customized with built-in properties.

  • Ranges - Gauge range is a visual element that helps to quickly visualize where a value falls on the axis. The text can be easily annotated in range to improve the readability.

  • Pointers - Pointer is used to indicate values on an axis. It has three types of pointers: needle pointer, marker pointer, and range pointer. All the pointers can be customized as needed.

  • Pointer Animation - Animates the pointer in a visually appealing way when the pointer moves from one value to another. Gauge supports various pointer animations.

  • Pointer interaction - Radial gauge provides an option to drag a pointer from one value to another. It is used to change the value at run time.

  • Annotations - Add multiple widgets such as text and image as an annotation at a specific point of interest in the radial gauge.

Get the demo application #

Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view samples code in GitHub.

Take a look at the following to learn more about Syncfusion Flutter guages:

Installation #

Install the latest version from pub.

Getting started #

Import the following package.

import 'package:syncfusion_flutter_gauges/gauges.dart';

Add radial gauge to the widget tree #

Add the radial gauge widget as a child of any widget. Here, the gauge widget is added as a child of container widget.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      body: Center(
        child: Container(
          child: SfRadialGauge()
      ))),
    );
  }

Add radial gauge elements #

Add the gauge elements such as axis, range, pointer, and annotation to display different color ranges, add pointer to indicate the current value, and add annotation to show the current value.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      body: Center(
        child: Container(
          child: SfRadialGauge(
          axes: <RadialAxis>[
            RadialAxis(minimum: 0, maximum: 150,
            ranges: <GaugeRange>[
              GaugeRange(startValue: 0, endValue: 50, color:Colors.green),
              GaugeRange(startValue: 50,endValue: 100,color: Colors.orange),
              GaugeRange(startValue: 100,endValue: 150,color: Colors.red)],
            pointers: <GaugePointer>[
              NeedlePointer(value: 90)],
            annotations: <GaugeAnnotation>[
              GaugeAnnotation(widget: Container(child: 
                 Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
                 angle: 90, positionFactor: 0.5
              )]
          )])
      ))),
    );
  }

The following screenshot illustrates the result of the above code sample.

simple radial gauge

Support and Feedback #

  • For any other queries, reach our Syncfusion support team or post the queries through the Community forums and submit a feature request or a bug through our Feedback portal.
  • To renew the subscription, click renew or contact our sales team at salessupport@syncfusion.com | Toll Free: 1-888-9 DOTNET.

About Syncfusion #

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1,000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Blazor, mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, and UWP). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[17.3.14-beta.1] - 10/03/2019

No major changes.

[1.0.0-beta] - 09/23/2019

Initial release.

Features

  • Includes features such as axes, ranges, pointers, pointer animation, pointer interaction, annotations, etc.

example/main.dart

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';
import 'package:syncfusion_flutter_core/core.dart';

void main() {
  // Register your license here
  SyncfusionLicense.registerLicense(null);
  return runApp(GaugeApp());
}

class GaugeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Radial Gauge Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter Radial Gauge'),
        ),
        body: SfRadialGauge(
          title:GaugeTitle(text: 'Speedometer', textStyle: const TextStyle(
            fontSize: 20.0,fontWeight: FontWeight.bold)),
          axes: <RadialAxis>[
          RadialAxis(minimum: 0,maximum: 150,
          ranges: <GaugeRange>[
            GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth: 10),
            GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10),
            GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)],
          pointers: <GaugePointer>[NeedlePointer(value:90)],
          annotations: <GaugeAnnotation>[
            GaugeAnnotation(widget: Container(child:
            Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
            angle: 90,positionFactor: 0.5)])])
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  syncfusion_flutter_gauges: ^17.3.14-beta.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:syncfusion_flutter_gauges/gauges.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
95
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Oct 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

Package is pre-release. (-5 points)

Pre-release versions should be used with caution; their API can change in breaking ways.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
intl ^0.16.0 0.16.0
syncfusion_flutter_core ^17.3.14 17.3.14
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
url_launcher 5.2.3
utf 0.9.0+5
vector_math 2.0.8
Dev dependencies
flutter_test