Skip to content

Commit 2c9f06e

Browse files
Yuvaraj-GajarajYuvaraj-Gajaraj
committed
New samples added.
1 parent 132a920 commit 2c9f06e

File tree

6 files changed

+595
-0
lines changed

6 files changed

+595
-0
lines changed

‎lib/samples/gauge/animation/radial_ease_animation.dart

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/// Flutter package imports
2+
import 'package:flutter/material.dart';
3+
4+
/// Gauge imports
5+
import 'package:syncfusion_flutter_gauges/gauges.dart';
6+
7+
/// Local imports
8+
import '../../../model/sample_view.dart';
9+
10+
/// Renders the gauge pointer ease animation sample
11+
class RadialEaseExample extends SampleView {
12+
/// Creates gauge with ease animation
13+
const RadialEaseExample(Key key) : super(key: key);
14+
15+
@override
16+
_RadialEaseExampleState createState() => _RadialEaseExampleState();
17+
}
18+
19+
class _RadialEaseExampleState extends SampleViewState {
20+
_RadialEaseExampleState();
21+
22+
@override
23+
Widget build(BuildContext context) {
24+
return _getRadialEaseExample();
25+
}
26+
27+
/// Return the gauge pointer ease animation gauge
28+
SfRadialGauge _getRadialEaseExample() {
29+
return SfRadialGauge(
30+
axes: <RadialAxis>[
31+
RadialAxis(
32+
startAngle: 0,
33+
endAngle: 360,
34+
showLabels: false,
35+
showTicks: false,
36+
radiusFactor: model.isWeb ? 0.8 : 0.9,
37+
axisLineStyle: AxisLineStyle(
38+
thicknessUnit: GaugeSizeUnit.factor,
39+
thickness: isCardView ? 0.07 : 0.1)),
40+
RadialAxis(
41+
startAngle: 170,
42+
endAngle: 170,
43+
showTicks: false,
44+
labelFormat: '{value}M',
45+
onLabelCreated: _handleLabelCreated,
46+
showAxisLine: false,
47+
radiusFactor: model.isWeb ? 0.8 : 0.9,
48+
minimum: 0,
49+
maximum: 15,
50+
axisLabelStyle: GaugeTextStyle(
51+
fontSize: isCardView ? 10 : 12, fontWeight: FontWeight.w500),
52+
labelOffset: 25,
53+
interval: isCardView ? 1 : _interval,
54+
canRotateLabels: true,
55+
annotations: <GaugeAnnotation>[
56+
GaugeAnnotation(
57+
positionFactor: 1,
58+
axisValue: 0,
59+
widget: Container(
60+
height: isCardView ? 30 : 45,
61+
width: isCardView ? 30 : 45,
62+
decoration: const BoxDecoration(
63+
image: DecorationImage(
64+
image: ExactAssetImage('images/shotput.png'),
65+
fit: BoxFit.fitHeight,
66+
),
67+
))),
68+
GaugeAnnotation(
69+
widget: Container(
70+
child: const Text('Distance', style: TextStyle(fontSize: 20)),
71+
))
72+
],
73+
pointers: <GaugePointer>[
74+
RangePointer(
75+
value: 11.5,
76+
width: 0.1,
77+
color: const Color(0xFFF67280),
78+
enableAnimation: true,
79+
sizeUnit: GaugeSizeUnit.factor,
80+
animationType: AnimationType.ease,
81+
// Sweep gradient not supported in web
82+
gradient: model.isWeb
83+
? null
84+
: const SweepGradient(
85+
colors: <Color>[Color(0xFFFFB397), Color(0xFFF46AA0)],
86+
stops: <double>[0.25, 0.75]),
87+
),
88+
model.isWeb
89+
? MarkerPointer(
90+
value: 11.5,
91+
markerType: MarkerType.circle,
92+
enableAnimation: true,
93+
animationType: AnimationType.ease,
94+
color: Colors.blue,
95+
markerHeight: isCardView ? 30 : 40,
96+
markerOffset: 4,
97+
markerWidth: isCardView ? 30 : 40)
98+
: MarkerPointer(
99+
value: 11.5,
100+
markerType: MarkerType.image,
101+
enableAnimation: true,
102+
animationType: AnimationType.ease,
103+
imageUrl: 'images/ball.png',
104+
markerHeight: isCardView ? 30 : 40,
105+
markerOffset: 4,
106+
markerWidth: isCardView ? 30 : 40)
107+
])
108+
],
109+
);
110+
}
111+
112+
/// Handled callback to hide last label value.
113+
void _handleLabelCreated(AxisLabelCreatedArgs args) {
114+
if (args.text == '15M') {
115+
args.text = '';
116+
}
117+
}
118+
119+
final double _interval = 1;
120+
}

‎lib/samples/gauge/animation/radial_slow_middle.dart

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/// Flutter package imports
2+
import 'package:flutter/material.dart';
3+
4+
/// Gauge imports
5+
import 'package:syncfusion_flutter_gauges/gauges.dart';
6+
7+
/// Local imports
8+
import '../../../model/sample_view.dart';
9+
10+
/// Renders the gauge pointer slow middle animation sample
11+
class RadialSlowMiddleAnimation extends SampleView {
12+
/// Centers gauge with [slowMiddle] animation
13+
const RadialSlowMiddleAnimation(Key key) : super(key: key);
14+
15+
@override
16+
_RadialSlowMiddleAnimationState createState() =>
17+
_RadialSlowMiddleAnimationState();
18+
}
19+
20+
class _RadialSlowMiddleAnimationState extends SampleViewState {
21+
_RadialSlowMiddleAnimationState();
22+
23+
@override
24+
Widget build(BuildContext context) {
25+
return _getRadialSlowMiddleAnimation();
26+
}
27+
28+
/// Returns the pointer slow middle animation gauge
29+
SfRadialGauge _getRadialSlowMiddleAnimation() {
30+
return SfRadialGauge(
31+
axes: <RadialAxis>[
32+
RadialAxis(
33+
radiusFactor: model.isWeb ? 0.85 : 0.95,
34+
startAngle: 270,
35+
endAngle: 270,
36+
showAxisLine: false,
37+
ticksPosition: ElementsPosition.outside,
38+
labelsPosition: ElementsPosition.outside,
39+
minimum: 0,
40+
maximum: 12,
41+
interval: 1,
42+
canRotateLabels: true,
43+
majorTickStyle: MajorTickStyle(
44+
length: 0.15, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5),
45+
minorTicksPerInterval: 4,
46+
showFirstLabel: false,
47+
axisLabelStyle: GaugeTextStyle(fontSize: 12),
48+
minorTickStyle: MinorTickStyle(
49+
length: 0.07, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5),
50+
pointers: <GaugePointer>[
51+
NeedlePointer(
52+
needleLength: 0.95,
53+
needleStartWidth: 0,
54+
lengthUnit: GaugeSizeUnit.factor,
55+
needleEndWidth: 5,
56+
needleColor: const Color(0xFFC06C84),
57+
knobStyle: KnobStyle(knobRadius: 0),
58+
value: 11,
59+
enableAnimation: true,
60+
animationType: AnimationType.slowMiddle),
61+
NeedlePointer(
62+
needleLength: 0.7,
63+
needleStartWidth: 0,
64+
lengthUnit: GaugeSizeUnit.factor,
65+
needleEndWidth: 5,
66+
needleColor: const Color(0xFFF67280),
67+
value: 2,
68+
enableAnimation: true,
69+
animationType: AnimationType.slowMiddle,
70+
knobStyle: KnobStyle(
71+
color: const Color(0xFFF67280),
72+
sizeUnit: GaugeSizeUnit.logicalPixel,
73+
knobRadius: 10),
74+
),
75+
NeedlePointer(
76+
needleLength: 0.8,
77+
needleStartWidth: 1,
78+
lengthUnit: GaugeSizeUnit.factor,
79+
needleEndWidth: 1,
80+
needleColor: _slowMiddleNeedleColor,
81+
knobStyle: KnobStyle(
82+
knobRadius: 5,
83+
sizeUnit: GaugeSizeUnit.logicalPixel,
84+
color: _slowMiddleNeedleColor),
85+
value: 10.4,
86+
enableAnimation: true,
87+
animationType: AnimationType.slowMiddle),
88+
])
89+
],
90+
);
91+
}
92+
93+
final Color _slowMiddleNeedleColor = const Color(0xFF355C7D);
94+
}

‎lib/samples/gauge/axis_feature/tick_customization.dart

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/// Flutter package imports
2+
import 'package:flutter/material.dart';
3+
4+
/// Gauge imports
5+
import 'package:syncfusion_flutter_gauges/gauges.dart';
6+
7+
/// Local imports
8+
import '../../../model/sample_view.dart';
9+
10+
/// Renders the gauge axis tick customization sample
11+
class RadialTickCustomization extends SampleView {
12+
/// Creates the gauge axis tick customization sample
13+
const RadialTickCustomization(Key key) : super(key: key);
14+
15+
@override
16+
_RadialTickCustomizationState createState() =>
17+
_RadialTickCustomizationState();
18+
}
19+
20+
class _RadialTickCustomizationState extends SampleViewState {
21+
_RadialTickCustomizationState();
22+
23+
@override
24+
Widget build(BuildContext context) {
25+
return getRadialTickCustomization();
26+
}
27+
28+
/// Returns the axis tick customized gauge
29+
SfRadialGauge getRadialTickCustomization() {
30+
return SfRadialGauge(
31+
axes: <RadialAxis>[
32+
RadialAxis(
33+
radiusFactor: model.isWeb ? 0.8 : 0.9,
34+
showAxisLine: false,
35+
onLabelCreated: _handleLabelCreated,
36+
startAngle: 270,
37+
endAngle: 270,
38+
canRotateLabels: true,
39+
labelsPosition: ElementsPosition.outside,
40+
axisLabelStyle: GaugeTextStyle(fontSize: 12),
41+
majorTickStyle: MajorTickStyle(
42+
length: 0.15,
43+
lengthUnit: GaugeSizeUnit.factor,
44+
thickness: 1,
45+
dashArray: model.isWeb ? null : <double>[2, 1]),
46+
minorTicksPerInterval: 4,
47+
interval: 10,
48+
minorTickStyle: MinorTickStyle(
49+
length: 0.06,
50+
thickness: 1,
51+
lengthUnit: GaugeSizeUnit.factor,
52+
53+
/// Dash array not supported in web.
54+
dashArray: model.isWeb ? null : <double>[2, 1]),
55+
pointers: <GaugePointer>[
56+
NeedlePointer(
57+
enableAnimation: model.isWeb ? false : true,
58+
animationType: AnimationType.ease,
59+
animationDuration: 1300,
60+
value: 75,
61+
needleColor: _tickCustomizationNeedleColor,
62+
lengthUnit: GaugeSizeUnit.factor,
63+
needleStartWidth: 0,
64+
needleEndWidth: 3,
65+
needleLength: 0.8,
66+
tailStyle: TailStyle(
67+
width: 3,
68+
lengthUnit: GaugeSizeUnit.logicalPixel,
69+
length: 20,
70+
color: _tickCustomizationNeedleColor,
71+
),
72+
knobStyle: KnobStyle(
73+
knobRadius: 8,
74+
sizeUnit: GaugeSizeUnit.logicalPixel,
75+
color: _tickCustomizationNeedleColor,
76+
))
77+
])
78+
],
79+
);
80+
}
81+
82+
/// Handled callback to hide last label value.
83+
void _handleLabelCreated(AxisLabelCreatedArgs args) {
84+
if (args.text == '100') {
85+
args.text = '';
86+
}
87+
}
88+
89+
final Color _tickCustomizationNeedleColor = const Color(0xFF494CA2);
90+
}

‎lib/samples/gauge/ranges/range_thickness.dart

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/// Flutter package imports
2+
import 'package:flutter/material.dart';
3+
4+
/// Gauge imports
5+
import 'package:syncfusion_flutter_gauges/gauges.dart';
6+
7+
/// Local imports
8+
import '../../../model/sample_view.dart';
9+
10+
/// Renders the gauge range thickness sample
11+
class RangeThicknessExample extends SampleView {
12+
/// Creates the gauge range thickness sample
13+
const RangeThicknessExample(Key key) : super(key: key);
14+
15+
@override
16+
_RangeThicknessExampleState createState() => _RangeThicknessExampleState();
17+
}
18+
19+
class _RangeThicknessExampleState extends SampleViewState {
20+
_RangeThicknessExampleState();
21+
22+
@override
23+
Widget build(BuildContext context) {
24+
return getRangeThicknessExampleGauge();
25+
}
26+
27+
/// Returns the range thickness gauge
28+
SfRadialGauge getRangeThicknessExampleGauge() {
29+
return SfRadialGauge(
30+
axes: <RadialAxis>[
31+
RadialAxis(
32+
showAxisLine: false,
33+
minimum: 0,
34+
maximum: 100,
35+
ticksPosition: ElementsPosition.outside,
36+
labelsPosition: ElementsPosition.outside,
37+
radiusFactor: 0.9,
38+
canRotateLabels: true,
39+
majorTickStyle: MajorTickStyle(
40+
length: 0.1,
41+
thickness: 1.5,
42+
lengthUnit: GaugeSizeUnit.factor,
43+
),
44+
minorTickStyle: MinorTickStyle(
45+
length: 0.04,
46+
thickness: 1.5,
47+
lengthUnit: GaugeSizeUnit.factor,
48+
),
49+
minorTicksPerInterval: 5,
50+
interval: 10,
51+
labelOffset: 15,
52+
axisLabelStyle: GaugeTextStyle(fontSize: 12),
53+
useRangeColorForAxis: true,
54+
pointers: <GaugePointer>[
55+
NeedlePointer(
56+
needleStartWidth: 1,
57+
enableAnimation: true,
58+
value: 70,
59+
tailStyle: TailStyle(
60+
length: 0.2, width: 5, lengthUnit: GaugeSizeUnit.factor),
61+
needleEndWidth: 5,
62+
needleLength: 0.7,
63+
lengthUnit: GaugeSizeUnit.factor,
64+
knobStyle: KnobStyle(
65+
knobRadius: 0.08,
66+
sizeUnit: GaugeSizeUnit.factor,
67+
))
68+
],
69+
ranges: <GaugeRange>[
70+
GaugeRange(
71+
startValue: 30,
72+
endValue: 100,
73+
startWidth: model.isWeb ? 0.2 : 0.05,
74+
75+
/// Sweep gradient not supported in web
76+
gradient: model.isWeb
77+
? null
78+
: const SweepGradient(
79+
colors: <Color>[Color(0xFF289AB1), Color(0xFF43E695)],
80+
stops: <double>[0.25, 0.75]),
81+
color: const Color(0xFF289AB1),
82+
rangeOffset: 0.08,
83+
endWidth: 0.2,
84+
sizeUnit: GaugeSizeUnit.factor)
85+
]),
86+
],
87+
);
88+
}
89+
}

0 commit comments

Comments
 (0)