import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'model.dart'; /// Renders the gauge pointer ease animation sample class RadialEaseExample extends SampleView { /// Creates gauge with ease animation //const RadialEaseExample(Key key) : super(key: key); @override _RadialEaseExampleState createState() => _RadialEaseExampleState(); } class _RadialEaseExampleState extends SampleViewState { _RadialEaseExampleState(); @override Widget build(BuildContext context) { return _buildRadialEaseExample(); } /// Return the gauge pointer ease animation gauge SfRadialGauge _buildRadialEaseExample() { return SfRadialGauge( axes: [ RadialAxis( startAngle: 300, endAngle: 240, showLabels: false, showTicks: false, radiusFactor: model.isWebFullView ? 0.8 : 0.9, axisLineStyle: AxisLineStyle( cornerStyle: CornerStyle.bothCurve, thicknessUnit: GaugeSizeUnit.factor, thickness: isCardView ? 0.1 : 0.1)), RadialAxis( startAngle: 300, endAngle: 240, showTicks: false, labelFormat: '{value}M', onLabelCreated: _handleLabelCreated, showAxisLine: false, radiusFactor: model.isWebFullView ? 0.8 : 0.9, minimum: 0, maximum: 15, axisLabelStyle: GaugeTextStyle( fontSize: isCardView ? 10 : 12, fontWeight: FontWeight.w500), labelOffset: 25, interval: isCardView ? 1 : _interval, canRotateLabels: true, annotations: [ GaugeAnnotation( positionFactor: 1, axisValue: 0, widget: Container( height: isCardView ? 30 : 45, width: isCardView ? 30 : 45, // decoration: const BoxDecoration( // image: DecorationImage( // image: ExactAssetImage('assets/images/foguete.png'), // fit: BoxFit.fitHeight, // ), // ) ) ), GaugeAnnotation( widget: Container( child: Column( mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ const Text('R\$', style: TextStyle(fontSize: 12)), const Text('460', style: TextStyle(fontSize: 30)), ], ), //const Text('21 a 28 de Nov', style: TextStyle(fontSize: 12,fontWeight: FontWeight.w300)), ], ), )) ], pointers: [ const RangePointer( value: 11.5, width: 0.1, color: Color(0xFFF67280), enableAnimation: true, sizeUnit: GaugeSizeUnit.factor, animationType: AnimationType.ease, cornerStyle: CornerStyle.bothCurve, gradient: SweepGradient( colors: [Color(0xFF4DACF7), Color(0xFF426ED6)], stops: [0.25, 0.75]), ), MarkerPointer( value: 3, markerType: MarkerType.image, enableAnimation: true, animationType: AnimationType.ease, //imageUrl: 'https://github.com/syncfusion/flutter-examples/blob/master/images/ball_progressbar.png?raw=true', imageUrl: 'assets/images/logo.png', markerHeight: isCardView ? 30 : model.isWebFullView ? 45 : 40, markerOffset: 4, markerWidth: isCardView ? 30 : model.isWebFullView ? 45 : 40, ), MarkerPointer( value: 7, markerType: MarkerType.image, enableAnimation: true, animationType: AnimationType.ease, //imageUrl: 'https://github.com/syncfusion/flutter-examples/blob/master/images/ball_progressbar.png?raw=true', imageUrl: 'assets/images/logo.png', markerHeight: isCardView ? 30 : model.isWebFullView ? 45 : 40, markerOffset: 4, markerWidth: isCardView ? 30 : model.isWebFullView ? 45 : 40, ), MarkerPointer( value: 13, markerType: MarkerType.image, enableAnimation: true, animationType: AnimationType.ease, //imageUrl: 'https://github.com/syncfusion/flutter-examples/blob/master/images/ball_progressbar.png?raw=true', imageUrl: 'assets/images/logo.png', markerHeight: isCardView ? 30 : model.isWebFullView ? 45 : 40, markerOffset: 4, markerWidth: isCardView ? 30 : model.isWebFullView ? 45 : 40, ) ]) ], ); } /// Handled callback to hide last label value. void _handleLabelCreated(AxisLabelCreatedArgs args) { if (args.text == '15M') { args.text = '15M'; } } final double _interval = 1; }