another_gauge 1.1.0 
another_gauge: ^1.1.0 copied to clipboard
Another customizable Gauge widget for Flutter, with automatic needle and cap ranged color
import 'package:another_gauge/another_gauge.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ValueNotifier<double> valueNotifier = ValueNotifier(0);
@override
Widget build(BuildContext context) {
ValueNotifier<bool> tickNotifier = ValueNotifier(false);
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('AnotherGauge examples'),
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Main tick value'),
StatefulBuilder(builder: (context, setState) {
return Switch(
value: tickNotifier.value,
onChanged: (value) => setState(() =>
tickNotifier.value = !tickNotifier.value));
}),
ElevatedButton(
onPressed: () {
valueNotifier.value += 15;
},
child: Text('Increment')),
SizedBox(
width: 16,
),
ElevatedButton(
onPressed: () {
valueNotifier.value -= 15;
},
child: Text('Decrement')),
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: ListView(
children: [
Container(
color: Colors.grey[200],
child: ValueListenableBuilder(
valueListenable: tickNotifier,
builder: (context, val, child) {
return AnotherGauge(
valueNotifier: valueNotifier,
capBorderColor: Colors.white,
capBorderWidth: 10,
capSize: 80,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.teal,
faceEndColor: Colors.cyan,
faceBorderWidth: 15,
subTicksColor: Colors.white,
needleColor: Colors.white,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 0,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 15,
showFrame: true,
gaugeSize: 350,
needleStartAngle: 135,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green),
GaugeRange(Colors.orange),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: 'km/h',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 36.0),
child: const Text('Speed',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
),
minValue: 0,
maxValue: 280,
mainTicksStep: 20,
);
}),
),
const SizedBox(
height: 32,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
AnotherGauge(
valueNotifier: ValueNotifier(5.5),
capBorderColor: Colors.white,
capBorderWidth: 10,
capSize: 80,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.teal,
faceEndColor: Colors.cyan,
faceBorderWidth: 15,
subTicksColor: Colors.white,
needleColor: Colors.white,
showMainTickValue: true,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: -90,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 15,
showFrame: true,
gaugeSize: 350,
needleStartAngle: 0,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green, size: 4),
GaugeRange(Colors.orange, size: 2),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: 'RPM * 1000',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 36.0),
child: const Text('Rotation',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
),
minValue: 0,
maxValue: 7,
mainTicksStep: 1,
),
AnotherGauge(
valueNotifier: valueNotifier,
capBorderColor: Colors.white,
capBorderWidth: 10,
capSize: 80,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.teal,
faceEndColor: Colors.cyan,
faceBorderWidth: 15,
subTicksColor: Colors.white,
needleColor: Colors.white,
showMainTickValue: true,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 90,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 15,
showFrame: true,
gaugeSize: 350,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green, size: 70),
GaugeRange(Colors.orange, size: 80),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: 'km/h',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 36.0),
child: const Text('Speed',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
),
minValue: 0,
maxValue: 240,
mainTicksStep: 20,
),
],
),
const SizedBox(
height: 32,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
AnotherGauge(
valueNotifier: ValueNotifier(6.7),
capBorderColor: Colors.white,
capBorderWidth: 1,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.deepPurpleAccent,
faceEndColor: Colors.deepPurple,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 180,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 5,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
needleStartAngle: 110,
needleSweepAngle: 210,
ranges: [
GaugeRange(Colors.red, size: 10),
GaugeRange(Colors.orange, size: 10),
GaugeRange(Colors.green),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: 'Liter',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Petrol',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 60,
mainTicksStep: 20,
),
AnotherGauge(
valueNotifier: valueNotifier,
capBorderColor: Colors.white,
capBorderWidth: 1,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.blueAccent,
faceEndColor: Colors.lightBlueAccent,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 180,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 5,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
// needleStartAngle: 180,
// needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green),
GaugeRange(Colors.orange),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '°C',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Oil',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 120,
mainTicksStep: 10,
),
AnotherGauge(
valueNotifier: ValueNotifier(5),
capBorderColor: Colors.white,
capBorderWidth: 1,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.yellow,
faceEndColor: Colors.orangeAccent,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 180,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 5,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.blue, size: 12),
GaugeRange(Colors.green, size: 13),
GaugeRange(Colors.orange, size: 25),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '°C',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Temperature',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 60,
mainTicksStep: 5,
),
AnotherGauge(
valueNotifier: ValueNotifier(94),
capBorderColor: Colors.white,
capBorderWidth: 1,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.black,
faceEndColor: Colors.blueGrey,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 180,
frameColor: Colors.blueGrey.shade600,
segmentWidth: 5,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green, size: 60),
GaugeRange(Colors.orange, size: 30),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '%',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Humidity',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 100,
mainTicksStep: 10,
),
],
),
const SizedBox(
height: 32,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
AnotherGauge(
valueNotifier: ValueNotifier(6.7),
capBorderColor: Colors.white,
capSize: 30,
capBorderWidth: 3,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.deepPurpleAccent,
faceEndColor: Colors.deepPurple,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
needleStartAngle: 110,
needleSweepAngle: 210,
ranges: [
GaugeRange(Colors.red, size: 10),
GaugeRange(Colors.orange, size: 10),
GaugeRange(Colors.green),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: 'Liter',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Petrol',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 60,
mainTicksStep: 20,
),
AnotherGauge(
valueNotifier: valueNotifier,
capBorderColor: Colors.white,
capBorderWidth: 3,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.blueAccent,
faceEndColor: Colors.lightBlueAccent,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: -90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
// needleStartAngle: 180,
// needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green, size: 60),
GaugeRange(Colors.orange),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '°C',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Oil',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 120,
mainTicksStep: 10,
),
AnotherGauge(
valueNotifier: ValueNotifier(5),
capBorderColor: Colors.white,
capBorderWidth: 3,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.black,
faceEndColor: Colors.blueGrey,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.blue, size: 12),
GaugeRange(Colors.green, size: 13),
GaugeRange(Colors.orange, size: 25),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '°C',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Temperature',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 60,
mainTicksStep: 5,
),
AnotherGauge(
valueNotifier: ValueNotifier(94),
capBorderColor: Colors.white,
capBorderWidth: 3,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.black,
faceEndColor: Colors.blueGrey,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: -90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: true,
gaugeSize: 150,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green),
GaugeRange(Colors.orange, size: 20),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '%',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Humidity',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 100,
mainTicksStep: 10,
),
],
),
const SizedBox(
height: 32,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
AnotherGauge(
valueNotifier: ValueNotifier(6.7),
capBorderColor: Colors.white,
capBorderWidth: 3,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.grey,
faceEndColor: Colors.white,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.black12,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.black87,
rangeNeedleColor: true,
frameAngle: 90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: false,
gaugeSize: 150,
needleStartAngle: 110,
needleSweepAngle: 210,
ranges: [
GaugeRange(Colors.red, size: 10),
GaugeRange(Colors.orange, size: 10),
GaugeRange(Colors.green),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: 'Liter',
valueFontColor: Colors.black45,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Petrol',
style: TextStyle(
color: Colors.black87,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 60,
mainTicksStep: 20,
),
AnotherGauge(
valueNotifier: ValueNotifier(20),
capBorderColor: Colors.white,
capBorderWidth: 2,
capSize: 30,
capColor: Colors.transparent,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.blueAccent,
faceEndColor: Colors.lightBlueAccent,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: false,
frameAngle: -90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: false,
gaugeSize: 150,
// needleStartAngle: 180,
// needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.green, size: 60),
GaugeRange(Colors.orange, size: 30),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '°C',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Oil',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 120,
mainTicksStep: 10,
),
AnotherGauge(
valueNotifier: ValueNotifier(5),
capBorderColor: Colors.cyan,
capBorderWidth: 1,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.yellow,
faceEndColor: Colors.orangeAccent,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: 90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: false,
gaugeSize: 150,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.blue, size: 12),
GaugeRange(Colors.green, size: 13),
GaugeRange(Colors.orange, size: 25),
GaugeRange(Colors.red),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '°C',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Temperature',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 60,
mainTicksStep: 5,
),
AnotherGauge(
valueNotifier: ValueNotifier(84),
capBorderColor: Colors.grey,
capBorderWidth: 3,
capSize: 30,
capColor: Colors.white10,
faceBorderColor: Colors.blueGrey.shade800,
faceStartColor: Colors.black,
faceEndColor: Colors.blueGrey,
faceBorderWidth: 6,
mainTickWidth: 2,
mainTicksLength: 4,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksFontSize: 8,
mainTicksValuePadding: 2.5,
showMainTickValue: tickNotifier.value,
mainTicksColor: Colors.white,
rangeNeedleColor: true,
frameAngle: -90,
frameColor: Colors.blueGrey.shade800,
frameBackgroundColor: Colors.blueGrey.shade800,
segmentWidth: 2,
frameWidth: 2,
showFrame: false,
gaugeSize: 150,
needleStartAngle: 180,
needleSweepAngle: 270,
ranges: [
GaugeRange(Colors.red, size: 60),
GaugeRange(Colors.orange, size: 30),
GaugeRange(Colors.green),
],
valuePadding: EdgeInsets.only(bottom: 90),
valueSymbol: '%',
valueFontColor: Colors.white,
displayWidget: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text('Humidity',
style: TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold)),
),
borderOffset: 8,
minValue: 0,
maxValue: 100,
mainTicksStep: 10,
),
],
)
],
),
),
),
],
)));
}
}Metadata
6
likes
160
points
42
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
Another customizable Gauge widget for Flutter, with automatic needle and cap ranged color
Repository (GitHub)
View/report issues
Documentation
License
BSD-2-Clause (license)
