flutter_gauge_widget 1.0.0

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:custom_gauge/custom_gauge.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Gauge Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({super.key});

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  double _score = 70.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Gauge Examples'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Basic Example
            _buildSectionTitle('Basic Custom Gauge'),
            const SizedBox(height: 16),
            Center(
              child: CustomGauge(
                score: _score,
                config: const CustomGaugeConfig(size: 200, strokeWidth: 12),
              ),
            ),
            const SizedBox(height: 32),

            // Custom Segments
            _buildSectionTitle('Custom Segments'),
            const SizedBox(height: 16),
            Center(
              child: CustomGauge(
                score: _score,
                segments: [
                  GaugeSegment(
                    minValue: 0,
                    maxValue: 30,
                    color: const Color(0xFFEF4444),
                    label: 'Critical',
                    percentage: 0.3,
                  ),
                  GaugeSegment(
                    minValue: 30,
                    maxValue: 70,
                    color: const Color(0xFFF59E0B),
                    label: 'Warning',
                    percentage: 0.4,
                  ),
                  GaugeSegment(
                    minValue: 70,
                    maxValue: 100,
                    color: const Color(0xFF10B981),
                    label: 'Safe',
                    percentage: 0.3,
                  ),
                ],
                config: const CustomGaugeConfig(size: 180, strokeWidth: 8),
              ),
            ),
            const SizedBox(height: 32),

            // With Side Widgets
            _buildSectionTitle('With Side Widgets'),
            const SizedBox(height: 16),
            CustomGauge(
              score: _score,
              sideWidgets: [
                _buildCustomItem('Network', 'Good', const Color(0xFFDCFCE7)),
                const SizedBox(height: 8),
                _buildCustomItem('Devices', 'Good', const Color(0xFFDCFCE7)),
                const SizedBox(height: 8),
                _buildCustomItem(
                  'Application',
                  'Action',
                  const Color(0xFFFEF9C3),
                ),
                const SizedBox(height: 8),
                _buildCustomItem('User', 'Poor', const Color(0xFFFEE2E2)),
              ],
            ),
            const SizedBox(height: 32),

            // Custom Indicator
            _buildSectionTitle('Custom Indicator'),
            const SizedBox(height: 16),
            Center(
              child: CustomGauge(
                score: _score,
                indicator: const GaugeIndicator(
                  radius: 12,
                  strokeWidth: 6,
                  fillColor: Colors.white,
                  useSegmentColorForOutline: true,
                ),
                config: CustomGaugeConfig(size: 160, strokeWidth: 10),
              ),
            ),
            const SizedBox(height: 32),

            // Score Control
            _buildSectionTitle('Score Control'),
            const SizedBox(height: 16),
            Slider(
              value: _score,
              min: 0,
              max: 100,
              divisions: 100,
              label: _score.round().toString(),
              onChanged: (value) {
                setState(() {
                  _score = value;
                });
              },
            ),
            const SizedBox(height: 16),
            Center(
              child: Text(
                'Current Score: ${_score.round()}',
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    );
  }

  Widget _buildCustomItem(String title, String status, Color color) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          flex: 2,
          child: Text(
            title,
            style: const TextStyle(color: Colors.grey, fontSize: 14),
            overflow: TextOverflow.ellipsis,
          ),
        ),
        const SizedBox(width: 8),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Text(
            status,
            style: TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 11,
              color: status == "Good"
                  ? Colors.green.shade800
                  : (status == "Action"
                      ? Colors.amber.shade900
                      : Colors.red.shade800),
            ),
          ),
        ),
      ],
    );
  }
}