Update Gauge Title and pointer value on stream

[jkoenig134]

Is it possible to update the gauge on a stream Event and animate to a new value with the pointer and change the description?

I want to have many gauges and i dont want so much flickering.

[DeviArunaMurugan]

Hi @jkoenig134 ,

Thanks for your interest in Syncfusion flutter radial gauge widget.

We have prepared sample based on your requirement by updating the pointer value and title in the stream event. Please find the code example,

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
 Random _random;
 static double _value = 10;
 static String _title = '10';

 @override
 void initState() {
   _random = Random();
   Duration _interval = Duration(seconds: 2);
   Stream<double> stream  = Stream<double>.periodic(_interval,getValue);
   stream.listen((data) {
     setState((){
       _value = data;
       _title = _value.toInt().toString() ;
     });
   },);

    super.initState();
  }

 double getValue(int x) {
   return _random.nextInt(100).toDouble();
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: SfRadialGauge(
            title: GaugeTitle(text: _title + 'MB is used'),
            axes: <RadialAxis>[
              RadialAxis(minimum: 0, maximum: 100,
              interval: 10,
              pointers: <GaugePointer>[
                NeedlePointer(value: _value, enableAnimation: true)],
          )],
        ),
      ),
    ));
  }
}

You can download the sample from the below location,
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/gauge_updates-1965801955.zip

Regards,
Devi

[jkoenig134]

Hi @DeviArunaMurugan ! Thanks for the fast answer, and the example! It works perfectly!