syncfusion_flutter_gauges 26.2.11
syncfusion_flutter_gauges: ^26.2.11 copied to clipboard
The Flutter gauges library includes a linear gauge and radial gauge (a.k.a. circular gauge) to create modern, interactive, animated gauges and radial sliders.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';
void main() {
return runApp(GaugeApp());
}
/// Represents the GaugeApp class
class GaugeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Radial Gauge Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
/// Represents MyHomePage class
class MyHomePage extends StatefulWidget {
/// Creates the instance of MyHomePage
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget _getGauge({bool isRadialGauge = true}) {
if (isRadialGauge) {
return _getRadialGauge();
} else {
return _getLinearGauge();
}
}
Widget _getRadialGauge() {
return 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: const Text('90.0',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold))),
angle: 90,
positionFactor: 0.5)
])
]);
}
Widget _getLinearGauge() {
return Container(
child: SfLinearGauge(
minimum: 0.0,
maximum: 100.0,
orientation: LinearGaugeOrientation.horizontal,
majorTickStyle: LinearTickStyle(length: 20),
axisLabelStyle: TextStyle(fontSize: 12.0, color: Colors.black),
axisTrackStyle: LinearAxisTrackStyle(
color: Colors.cyan,
edgeStyle: LinearEdgeStyle.bothFlat,
thickness: 15.0,
borderColor: Colors.grey)),
margin: EdgeInsets.all(10),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Syncfusion Flutter Gauge')),
body: _getGauge());
}
}