another_gauge 1.0.2 
another_gauge: ^1.0.2 copied to clipboard
Fully customizable Gauge widget for Flutter
import 'package:flutter/material.dart';
import 'package:another_gauge/another_gauge.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> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('AnotherGauge examples'),
),
body: Container(
color: Colors.grey[200],
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.black87,
border: Border.all(
color: Colors.blueGrey,
width: 1,
),
//borderRadius: const BorderRadius.all(Radius.circular(20))
borderRadius: BorderRadius.only(bottomRight:Radius.circular(200/ 2),
bottomLeft:Radius.circular(200 / 2),
topRight: const Radius.circular(20), topLeft: const Radius.circular(20))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
AnotherGauge(
capBorderColor: Colors.white,
capBorderWidth: 2,
capColor: Colors.white10,
faceStartColor: Colors.blueGrey,
faceEndColor: Colors.black87,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksColor: Colors.red,
strokeWidth: 1,
showFrame: false,
gaugeSize: 200,
segments: [
GaugeSegment('Low', 200, Colors.green),
GaugeSegment('Medium', 40, Colors.orange),
GaugeSegment('High', 20, Colors.red),
],
currentValue: 60,
valueSymbol: ' km/h',
displayWidget: const Text('Speed',
style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold)),
maxValue: 260,
),
AnotherGauge(
capBorderColor: Colors.white,
capBorderWidth: 2,
capColor: Colors.white10,
faceStartColor: Colors.blueGrey,
faceEndColor: Colors.black87,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksColor: Colors.red,
strokeWidth: 1,
showFrame: false,
mainTickWidth: 2,
mainTicksLength: 2,
subTickWidth: 0.5,
frameWidth: 1,
rangeNeedleColor: true,
gaugeSize: 100,
segments: [
GaugeSegment('Critically Low', 10, Colors.red),
GaugeSegment('Low', 20, Colors.orange),
GaugeSegment('Medium', 20, Colors.yellow),
GaugeSegment('High', 50, Colors.green),
],
currentValue: 15,
showMarkers: false,
valueWidget: Container(),
displayWidget:
const Text('Fuel', style: TextStyle(color: Colors.white,fontSize: 10, fontWeight: FontWeight.bold)),
),
AnotherGauge(
capBorderColor: Colors.white,
capBorderWidth: 2,
capColor: Colors.white10,
faceStartColor: Colors.blueGrey,
faceEndColor: Colors.black87,
subTicksColor: Colors.white,
needleColor: Colors.white,
mainTicksColor: Colors.red,
strokeWidth: 1,
showFrame: false,
gaugeSize: 200,
rangeNeedleColor: false,
segments: [
GaugeSegment('Medium', 6000, Colors.green),
GaugeSegment('High', 1000, Colors.red),
],
currentValue: 0,
showMarkers: false,
displayWidget: const Text('RPM',
style: TextStyle(color: Colors.white,fontSize: 12, fontWeight: FontWeight.bold)),
maxValue: 7000,
),
]),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.blueGrey,
width: 1,
),
//borderRadius: const BorderRadius.all(Radius.circular(20))
borderRadius: BorderRadius.only(bottomRight:Radius.circular(200/ 2),
bottomLeft:Radius.circular(200 / 2),
topRight: const Radius.circular(20), topLeft: const Radius.circular(20))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
AnotherGauge(
capBorderColor: Colors.grey,
capBorderWidth: 2,
capColor: Colors.black,
faceStartColor: Colors.white,
faceEndColor: Colors.white30,
subTicksColor: Colors.grey,
needleColor: Colors.black,
mainTicksColor: Colors.red,
strokeWidth: 2,
showFrame: false,
gaugeSize: 200,
segments: [
GaugeSegment('Low', 200, Colors.green),
GaugeSegment('Medium', 40, Colors.orange),
GaugeSegment('High', 20, Colors.red),
],
currentValue: 60,
valueSymbol: ' km/h',
displayWidget: const Text('Speed',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
maxValue: 260,
),
AnotherGauge(
capBorderColor: Colors.black12,
capBorderWidth: 1,
capColor: Colors.black,
faceStartColor: Colors.white,
faceEndColor: Colors.white30,
subTicksColor: Colors.grey,
needleColor: Colors.black,
mainTicksColor: Colors.red,
strokeWidth: 2,
showFrame: false,
mainTickWidth: 2,
mainTicksLength: 2,
subTickWidth: 0.5,
frameWidth: 1,
rangeNeedleColor: true,
gaugeSize: 100,
segments: [
GaugeSegment('Critically Low', 10, Colors.red),
GaugeSegment('Low', 20, Colors.orange),
GaugeSegment('Medium', 20, Colors.yellow),
GaugeSegment('High', 50, Colors.green),
],
currentValue: 15,
showMarkers: false,
valueWidget: Container(),
displayWidget:
const Text('Fuel', style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold)),
),
AnotherGauge(
capBorderColor: Colors.grey,
capBorderWidth: 2,
capColor: Colors.black,
faceStartColor: Colors.white,
faceEndColor: Colors.white30,
subTicksColor: Colors.grey,
needleColor: Colors.black,
mainTicksColor: Colors.red,
strokeWidth: 2,
showFrame: false,
gaugeSize: 200,
rangeNeedleColor: false,
segments: [
GaugeSegment('Medium', 6000, Colors.green),
GaugeSegment('High', 1000, Colors.red),
],
currentValue: 0,
showMarkers: false,
displayWidget: const Text('RPM',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
maxValue: 7000,
),
]),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blueGrey,
width: 5,
),
//borderRadius: const BorderRadius.all(Radius.circular(20))
borderRadius: BorderRadius.only(bottomRight:Radius.circular(200/ 2),
bottomLeft:Radius.circular(200 / 2),
topRight: const Radius.circular(20), topLeft: const Radius.circular(20))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
AnotherGauge(
showFrame: false,
gaugeSize: 200,
segments: [
GaugeSegment('Low', 200, Colors.green),
GaugeSegment('Medium', 40, Colors.orange),
GaugeSegment('High', 20, Colors.red),
],
currentValue: 60,
valueSymbol: ' km/h',
displayWidget: const Text('Speed',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
maxValue: 260,
),
AnotherGauge(
showFrame: false,
strokeWidth: 2,
mainTickWidth: 2,
mainTicksLength: 2,
subTickWidth: 0.5,
frameWidth: 1,
capBorderWidth: 1,
rangeNeedleColor: true,
gaugeSize: 100,
segments: [
GaugeSegment('Critically Low', 10, Colors.red),
GaugeSegment('Low', 20, Colors.orange),
GaugeSegment('Medium', 20, Colors.yellow),
GaugeSegment('High', 50, Colors.green),
],
currentValue: 45,
needleColor: Colors.blue,
showMarkers: false,
valueWidget: Container(),
displayWidget:
const Text('Fuel', style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
),
AnotherGauge(
showFrame: false,
gaugeSize: 200,
rangeNeedleColor: true,
segments: [
GaugeSegment('Medium', 6000, Colors.green),
GaugeSegment('High', 1000, Colors.red),
],
currentValue: 0,
needleColor: Colors.red,
showMarkers: false,
displayWidget: const Text('RPM',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
maxValue: 7000,
),
]),
),
])),
));
}
}Metadata
6
likes
0
points
42
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
Fully customizable Gauge widget for Flutter
Repository (GitHub)
View/report issues
License
unknown (license)
