horizontal_gauge 2.0.1 
horizontal_gauge: ^2.0.1 copied to clipboard
A customizable horizontal gauge widget for Flutter with smooth animations, interactive controls, and rich theming options.
import 'package:flutter/material.dart';
import 'package:horizontal_gauge/horizontal_gauge.dart';
import 'package:horizontal_gauge/circular_gauge.dart';
import 'dart:async';
import 'dart:math' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gauge Examples',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue, brightness: Brightness.light),
themeMode: ThemeMode.light,
home: const ExampleScreen(),
);
}
}
class ExampleScreen extends StatefulWidget {
const ExampleScreen({super.key});
@override
State<ExampleScreen> createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> with TickerProviderStateMixin {
double weightValue = 65.0;
double heightValue = 175.0;
double temperatureValue = 23.5;
double speedValue = 50.0;
double batteryValue = 80.0;
double speedometerValue = 80.0;
double fuelValue = 60.0;
double rpmValue = 3500.0;
double temperatureCircularValue = 85.0;
double pressureValue = 25.0;
late AnimationController _simulationController;
late Timer _timer;
@override
void initState() {
super.initState();
_simulationController = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat(reverse: true);
_timer = Timer.periodic(const Duration(seconds: 2), (timer) {
setState(() {
speedometerValue = 60 + (math.Random().nextDouble() * 80);
fuelValue = 20 + (math.Random().nextDouble() * 60);
rpmValue = 1000 + (math.Random().nextDouble() * 5000);
temperatureCircularValue = 70 + (math.Random().nextDouble() * 40);
pressureValue = 15 + (math.Random().nextDouble() * 25);
});
});
}
@override
void dispose() {
_simulationController.dispose();
_timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: const Color(0xFF1A1A1A),
appBar: AppBar(
title: const Text('Gauge Examples', style: TextStyle(color: Colors.white)),
backgroundColor: const Color(0xFF2A2A2A),
elevation: 0,
bottom: const TabBar(
labelColor: Colors.white,
tabs: [
Tab(text: 'Horizontal Gauges'),
Tab(text: 'Circular Gauges'),
],
),
),
body: TabBarView(
children: [
_buildHorizontalGauges(),
_buildCircularGauges(),
],
),
),
);
}
Widget _buildHorizontalGauges() {
return SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Interactive Horizontal Gauges',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
),
const SizedBox(height: 8),
const Text('Tap or drag to change values', style: TextStyle(fontSize: 16, color: Colors.white70)),
const SizedBox(height: 32),
HorizontalGauge(
title: 'Weight Goal',
min: 40.0,
max: 120.0,
value: weightValue,
unit: 'kg',
color: Colors.blue,
onChanged: (value) {
setState(() {
weightValue = value;
});
},
),
const SizedBox(height: 24),
HorizontalGauge(
title: 'Height',
min: 140.0,
max: 200.0,
value: heightValue,
unit: 'cm',
color: Colors.green,
theme: HorizontalGaugeTheme(
backgroundColor: Colors.green.withValues(alpha:0.1),
borderColor: Colors.green.withValues(alpha:0.3),
titleColor: Colors.green[300],
valueColor: Colors.green[100],
unitColor: Colors.green[200],
indicatorGradient: LinearGradient(colors: [Colors.green[400]!, Colors.green[600]!]),
indicatorShadows: [
BoxShadow(color: Colors.green.withValues(alpha:0.5), blurRadius: 10, offset: const Offset(0, 3)),
],
),
onChanged: (value) {
setState(() {
heightValue = value;
});
},
),
const SizedBox(height: 24),
HorizontalGauge(
title: 'Temperature',
min: -10.0,
max: 50.0,
value: temperatureValue,
unit: '°C',
color: Colors.orange,
theme: HorizontalGaugeTheme(
backgroundGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.orange.withValues(alpha:0.1), Colors.red.withValues(alpha:0.1)],
),
titleStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.orange),
valueStyle: const TextStyle(fontSize: 32, fontWeight: FontWeight.w900, color: Colors.white),
indicatorWidth: 8,
indicatorHeight: 60,
indicatorBorderRadius: BorderRadius.circular(10),
),
onChanged: (value) {
setState(() {
temperatureValue = value;
});
},
),
const SizedBox(height: 24),
HorizontalGauge(
title: 'Speed Limit',
min: 0.0,
max: 120.0,
value: speedValue,
unit: 'km/h',
color: Colors.red,
theme: HorizontalGaugeTheme(
backgroundColor: Colors.red.withValues(alpha:0.05),
borderColor: Colors.red.withValues(alpha:0.2),
tickColor: Colors.red.withValues(alpha:0.3),
majorTickColor: Colors.red.withValues(alpha:0.5),
labelColor: Colors.red[300],
indicatorColor: Colors.red[600],
tickHeight: 8,
majorTickHeight: 16,
),
customTickCount: 25,
onChanged: (value) {
setState(() {
speedValue = value;
});
},
),
const SizedBox(height: 24),
HorizontalGauge(
title: 'Battery Level',
min: 0.0,
max: 100.0,
value: batteryValue,
unit: '%',
color: Colors.purple,
height: 200.0,
showTicks: false,
theme: HorizontalGaugeTheme(
backgroundColor: const Color(0xFF2A1A3A),
borderColor: Colors.purple.withValues(alpha:0.4),
titleColor: Colors.purple[200],
valueColor: Colors.white,
unitColor: Colors.purple[300],
indicatorGradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.purple[300]!, Colors.purple[700]!],
),
indicatorWidth: 6,
indicatorHeight: 80,
titleStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
valueStyle: const TextStyle(fontSize: 36, fontWeight: FontWeight.w800),
),
onChanged: (value) {
setState(() {
batteryValue = value;
});
},
),
const SizedBox(height: 32),
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha:0.03),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white.withValues(alpha:0.1)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Custom Builder Examples:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
),
const SizedBox(height: 16),
HorizontalGauge(
title: 'Custom Title',
min: 0.0,
max: 100.0,
value: 75.0,
unit: 'pts',
color: Colors.cyan,
height: 120,
titleBuilder: (context, title, value) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.cyan.withValues(alpha:0.3), Colors.blue.withValues(alpha:0.3)],
),
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: Colors.cyan, size: 16),
const SizedBox(width: 8),
Text(
'$title (${value.round()})',
style: const TextStyle(color: Colors.cyan, fontWeight: FontWeight.bold, fontSize: 16),
),
],
),
);
},
onChanged: null,
),
const SizedBox(height: 20),
HorizontalGauge(
title: 'Score',
min: 0.0,
max: 1000.0,
value: 850.0,
unit: 'pts',
color: Colors.amber,
height: 150,
valueBuilder: (context, value, unit) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [Colors.amber.withValues(alpha:0.3), Colors.orange.withValues(alpha:0.1)],
),
border: Border.all(color: Colors.amber, width: 2),
),
child: Text(
value.round().toString(),
style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w900, color: Colors.amber),
),
),
const SizedBox(height: 4),
Text(unit, style: TextStyle(fontSize: 12, color: Colors.amber.withValues(alpha:0.8))),
],
);
},
onChanged: null,
),
const SizedBox(height: 20),
HorizontalGauge(
title: 'Progress',
min: 0.0,
max: 100.0,
value: 60.0,
unit: '%',
color: Colors.teal,
height: 120,
indicatorBuilder: (context, value, min, max, color) {
return Container(
width: 20,
height: 40,
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(color: Colors.teal.withValues(alpha:0.6), blurRadius: 8, spreadRadius: 2)],
),
child: const Icon(Icons.arrow_drop_down, color: Colors.white, size: 16),
);
},
onChanged: null,
),
],
),
),
const SizedBox(height: 32),
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha:0.05),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white.withValues(alpha:0.1)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Features:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
),
const SizedBox(height: 8),
const _FeatureItem(text: '• Responsive design for all screen sizes'),
const _FeatureItem(text: '• Drag or tap to change values'),
const _FeatureItem(text: '• Smart boundary detection (500ms limit)'),
const _FeatureItem(text: '• Smooth animations'),
const _FeatureItem(text: '• Highly customizable themes'),
const _FeatureItem(text: '• Gradient backgrounds and indicators'),
const _FeatureItem(text: '• Custom colors for all elements'),
const _FeatureItem(text: '• Configurable tick marks'),
const _FeatureItem(text: '• Custom text styles'),
const _FeatureItem(text: '• Custom builder patterns for all components'),
const _FeatureItem(text: '• Title, value, indicator, and tick builders'),
const SizedBox(height: 16),
Text(
'Current Values:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white.withValues(alpha:0.9)),
),
const SizedBox(height: 8),
_ValueDisplay(label: 'Weight', value: weightValue.toStringAsFixed(1), unit: 'kg'),
_ValueDisplay(label: 'Height', value: heightValue.toStringAsFixed(1), unit: 'cm'),
_ValueDisplay(label: 'Temperature', value: temperatureValue.toStringAsFixed(1), unit: '°C'),
_ValueDisplay(label: 'Speed', value: speedValue.toStringAsFixed(1), unit: 'km/h'),
_ValueDisplay(label: 'Battery', value: batteryValue.toStringAsFixed(1), unit: '%'),
],
),
),
const SizedBox(height: 32),
],
),
),
);
}
Widget _buildCircularGauges() {
return SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'Dashboard Style Gauges',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
),
const SizedBox(height: 8),
const Text('Live simulation - values change automatically', style: TextStyle(fontSize: 16, color: Colors.white70)),
const SizedBox(height: 32),
CircularGauge(
title: 'Speed',
min: 0.0,
max: 200.0,
value: speedometerValue,
unit: 'km/h',
color: Colors.blue,
size: 250,
theme: CircularGaugeTheme(
backgroundColor: Colors.blue.withValues(alpha:0.1),
titleColor: Colors.blue[300],
valueColor: Colors.white,
unitColor: Colors.blue[200],
needleColor: Colors.blue[400],
centerDotColor: Colors.white,
arcColor: Colors.white.withValues(alpha:0.1),
progressColor: Colors.blue,
progressGradient: LinearGradient(
colors: [Colors.blue[300]!, Colors.blue[600]!],
),
arcStrokeWidth: 12,
progressStrokeWidth: 12,
needleWidth: 4,
centerDotRadius: 8,
),
),
const SizedBox(height: 32),
Row(
children: [
Expanded(
child: CircularGauge(
title: 'Fuel',
min: 0.0,
max: 100.0,
value: fuelValue,
unit: '%',
color: Colors.green,
size: 180,
theme: CircularGaugeTheme(
titleColor: Colors.green[300],
valueColor: Colors.white,
unitColor: Colors.green[200],
needleColor: Colors.green[400],
centerDotColor: Colors.white,
arcColor: Colors.white.withValues(alpha:0.1),
progressGradient: LinearGradient(
colors: [Colors.red, Colors.yellow, Colors.green],
stops: [0.0, 0.5, 1.0],
),
arcStrokeWidth: 8,
progressStrokeWidth: 8,
needleWidth: 3,
centerDotRadius: 6,
),
),
),
const SizedBox(width: 16),
Expanded(
child: CircularGauge(
title: 'RPM',
min: 0.0,
max: 8000.0,
value: rpmValue,
unit: 'rpm',
color: Colors.red,
size: 180,
theme: CircularGaugeTheme(
titleColor: Colors.red[300],
valueColor: Colors.white,
unitColor: Colors.red[200],
needleColor: Colors.red[400],
centerDotColor: Colors.white,
arcColor: Colors.white.withValues(alpha:0.1),
progressColor: Colors.red,
progressGradient: LinearGradient(
colors: [Colors.orange, Colors.red],
),
arcStrokeWidth: 8,
progressStrokeWidth: 8,
needleWidth: 3,
centerDotRadius: 6,
),
),
),
],
),
const SizedBox(height: 32),
Row(
children: [
Expanded(
child: CircularGauge(
title: 'Engine Temp',
min: 60.0,
max: 120.0,
value: temperatureCircularValue,
unit: '°C',
color: Colors.orange,
size: 180,
theme: CircularGaugeTheme(
titleColor: Colors.orange[300],
valueColor: Colors.white,
unitColor: Colors.orange[200],
needleColor: Colors.orange[400],
centerDotColor: Colors.white,
arcColor: Colors.white.withValues(alpha:0.1),
progressGradient: LinearGradient(
colors: [Colors.blue, Colors.green, Colors.yellow, Colors.red],
stops: [0.0, 0.3, 0.7, 1.0],
),
arcStrokeWidth: 8,
progressStrokeWidth: 8,
needleWidth: 3,
centerDotRadius: 6,
),
),
),
const SizedBox(width: 16),
Expanded(
child: CircularGauge(
title: 'Oil Pressure',
min: 0.0,
max: 50.0,
value: pressureValue,
unit: 'psi',
color: Colors.purple,
size: 180,
theme: CircularGaugeTheme(
titleColor: Colors.purple[300],
valueColor: Colors.white,
unitColor: Colors.purple[200],
needleColor: Colors.purple[400],
centerDotColor: Colors.white,
arcColor: Colors.white.withValues(alpha:0.1),
progressColor: Colors.purple,
arcStrokeWidth: 8,
progressStrokeWidth: 8,
needleWidth: 3,
centerDotRadius: 6,
),
),
),
],
),
const SizedBox(height: 32),
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha:0.03),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white.withValues(alpha:0.1)),
),
child: Column(
children: [
const Text(
'Premium Dashboard Style',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
),
const SizedBox(height: 20),
CircularGauge(
title: 'Vehicle Speed',
min: 0.0,
max: 300.0,
value: speedometerValue * 1.5,
unit: 'km/h',
color: Colors.cyan,
size: 280,
theme: CircularGaugeTheme(
titleStyle: const TextStyle(fontSize: 22, fontWeight: FontWeight.w600, color: Colors.cyan),
valueStyle: const TextStyle(fontSize: 42, fontWeight: FontWeight.w900, color: Colors.white),
unitStyle: const TextStyle(fontSize: 20, color: Colors.cyan),
needleGradient: LinearGradient(
colors: [Colors.cyan[300]!, Colors.cyan[600]!],
),
centerDotColor: Colors.cyan,
arcColor: Colors.white.withValues(alpha:0.05),
progressGradient: SweepGradient(
colors: [
Colors.green,
Colors.yellow,
Colors.orange,
Colors.red,
],
stops: [0.0, 0.4, 0.7, 1.0],
),
arcStrokeWidth: 15,
progressStrokeWidth: 15,
needleWidth: 5,
centerDotRadius: 12,
majorTickColor: Colors.white.withValues(alpha:0.8),
tickColor: Colors.white.withValues(alpha:0.4),
labelColor: Colors.white.withValues(alpha:0.9),
),
titleBuilder: (context, title, value) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.cyan.withValues(alpha:0.3), Colors.blue.withValues(alpha:0.3)],
),
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.cyan.withValues(alpha:0.5)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.speed, color: Colors.cyan, size: 20),
const SizedBox(width: 10),
Text(
title,
style: const TextStyle(
color: Colors.cyan,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
],
),
);
},
),
],
),
),
const SizedBox(height: 32),
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha:0.05),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white.withValues(alpha:0.1)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.auto_graph, color: Colors.green, size: 20),
const SizedBox(width: 8),
const Text(
'Live Dashboard Values:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
const SizedBox(height: 16),
_ValueDisplay(label: 'Speed', value: speedometerValue.toStringAsFixed(1), unit: 'km/h'),
_ValueDisplay(label: 'Fuel', value: fuelValue.toStringAsFixed(1), unit: '%'),
_ValueDisplay(label: 'RPM', value: rpmValue.toStringAsFixed(0), unit: 'rpm'),
_ValueDisplay(label: 'Engine Temp', value: temperatureCircularValue.toStringAsFixed(1), unit: '°C'),
_ValueDisplay(label: 'Oil Pressure', value: pressureValue.toStringAsFixed(1), unit: 'psi'),
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.green.withValues(alpha:0.1),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.green.withValues(alpha:0.3)),
),
child: Row(
children: [
Icon(Icons.info_outline, color: Colors.green, size: 16),
const SizedBox(width: 8),
Expanded(
child: Text(
'Circular gauges are read-only and update automatically',
style: TextStyle(fontSize: 12, color: Colors.green[300]),
),
),
],
),
),
],
),
),
const SizedBox(height: 32),
],
),
),
);
}
}
class _FeatureItem extends StatelessWidget {
final String text;
const _FeatureItem({required this.text});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Text(text, style: TextStyle(fontSize: 14, color: Colors.white.withValues(alpha:0.8))),
);
}
}
class _ValueDisplay extends StatelessWidget {
final String label;
final String value;
final String unit;
const _ValueDisplay({required this.label, required this.value, required this.unit});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: TextStyle(fontSize: 13, color: Colors.white.withValues(alpha:0.7))),
Text(
'$value $unit',
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: Colors.white.withValues(alpha:0.9)),
),
],
),
);
}
}Metadata
3
likes
150
points
316
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
A customizable horizontal gauge widget for Flutter with smooth animations, interactive controls, and rich theming options.
Repository (GitHub)
View/report issues
Documentation
License
MIT (license)
