Custom Gauge

A highly customizable gauge widget for Flutter with animated segments and indicators.

Features

• 🎨 Highly Customizable: Colors, sizes, segments, indicators, and more
• 🎯 Animated: Smooth animations for score changes
• 📊 Flexible Segments: Define custom risk segments with different colors and ranges
• 🎪 Custom Indicators: Configurable indicator appearance and behavior
• 📱 Responsive: Works on all screen sizes
• 🎛️ Side Widgets: Add custom widgets next to the gauge
• 🎨 Custom Center Widget: Replace the default center text with your own widget

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  custom_gauge: ^1.0.0

Quick Start

import 'package:custom_gauge/custom_gauge.dart';

// Basic usage
CustomGauge(
  score: 75.0,
)

// With custom configuration
CustomGauge(
  score: 75.0,
  config: CustomGaugeConfig(
    size: 200,
    strokeWidth: 12,
    showCenterText: true,
  ),
  indicator: GaugeIndicator(
    radius: 10,
    strokeWidth: 6,
  ),
)

Configuration

CustomGaugeConfig

Property	Type	Default	Description
size	double	200.0	The size of the gauge (width and height)
strokeWidth	double	10.0	The stroke width of the gauge segments
indicatorRadius	double	8.0	The radius of the indicator thumb
indicatorStrokeWidth	double	5.0	The stroke width of the indicator outline
gapSize	double	0.2	The gap size between segments (in radians)
showCenterText	bool	true	Whether to show the center score text
showLabels	bool	true	Whether to show the 0 and 100 labels
centerTextFontSize	double	32.0	The font size of the center score text
labelFontSize	double	12.0	The font size of the 0 and 100 labels
centerTextColor	Color	Color(0xFF1F2937)	The color of the center score text
labelColor	Color	Color(0xFF6B7280)	The color of the 0 and 100 labels
backgroundColor	Color	Colors.white	The background color of the gauge
animationDuration	Duration	Duration(milliseconds: 1000)	Animation duration
animationCurve	Curve	Curves.easeInOut	Animation curve

GaugeIndicator

Property	Type	Default	Description
radius	double	8.0	The radius of the indicator
strokeWidth	double	5.0	The stroke width of the indicator outline
fillColor	Color	Colors.white	The fill color of the indicator
outlineColor	Color	Color(0xFF10B981)	The outline color of the indicator
useSegmentColorForOutline	bool	true	Whether to use the segment color for the outline
animated	bool	true	Whether to animate the indicator

GaugeSegment

Property	Type	Description
minValue	double	The minimum value for this segment
maxValue	double	The maximum value for this segment
color	Color	The color of this segment
label	String	The label for this segment
percentage	double	The percentage of the gauge this segment should occupy

Examples

Basic Usage

CustomGauge(
  score: 75.0,
)

Custom Segments

CustomGauge(
  score: 75.0,
  segments: [
    GaugeSegment(
      minValue: 0,
      maxValue: 30,
      color: Color(0xFFEF4444),
      label: 'Critical',
      percentage: 0.3,
    ),
    GaugeSegment(
      minValue: 30,
      maxValue: 70,
      color: Color(0xFFF59E0B),
      label: 'Warning',
      percentage: 0.4,
    ),
    GaugeSegment(
      minValue: 70,
      maxValue: 100,
      color: Color(0xFF10B981),
      label: 'Safe',
      percentage: 0.3,
    ),
  ],
)

With Side Widgets

CustomGauge(
  score: 75.0,
  sideWidgets: [
    _buildRiskItem('Network', 'Good', Color(0xFFDCFCE7)),
    _buildRiskItem('Devices', 'Good', Color(0xFFDCFCE7)),
    _buildRiskItem('Application', 'Action', Color(0xFFFEF9C3)),
    _buildRiskItem('User', 'Poor', Color(0xFFFEE2E2)),
  ],
)

Custom Center Widget

CustomGauge(
  score: 75.0,
  centerWidget: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        '75',
        style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
      ),
      Text('Score'),
    ],
  ),
)

Custom Indicator

CustomGauge(
  score: 75.0,
  indicator: GaugeIndicator(
    radius: 12,
    strokeWidth: 6,
    fillColor: Colors.white,
    useSegmentColorForOutline: true,
  ),
)

Default Segments

The package comes with default segments:

• High (0-25): Red color, 26% of gauge
• Medium (25-60): Amber color, 36% of gauge
• Low (60-87): Green color, 28% of gauge
• Very Low (87-100): Light gray color, 10% of gauge

Animation

The gauge supports smooth animations when the score changes. You can customize the animation duration and curve:

CustomGauge(
  score: 75.0,
  config: CustomGaugeConfig(
    animationDuration: Duration(milliseconds: 1500),
    animationCurve: Curves.elasticOut,
  ),
)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a list of changes.

Libraries

custom_gauge

risk_gauge