arc_gauge 0.1.0

A customizable semicircular arc gauge widget for Flutter. Supports multiple color zones, progress fill up to the current value, and a dot indicator with shadow — ideal for BMI, sleep scores, credit sc [...]

example/lib/main.dart

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

void main() => runApp(const ExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ArcGauge Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const ExampleScreen(),
    );
  }
}

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

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

class _ExampleScreenState extends State<ExampleScreen> {
  double _bmi = 22.5;
  double _sleep = 74;
  double _credit = 720;

  static const _bmiZones = [
    ArcZone(from: 10, to: 18.5, label: 'Underweight', color: Color(0xFF378ADD)),
    ArcZone(from: 18.5, to: 25, label: 'Normal', color: Color(0xFF639922)),
    ArcZone(from: 25, to: 30, label: 'Overweight', color: Color(0xFFEF9F27)),
    ArcZone(from: 30, to: 40, label: 'Obese', color: Color(0xFFE24B4A)),
  ];

  static const _sleepZones = [
    ArcZone(from: 0, to: 40, label: 'Poor', color: Color(0xFFE24B4A)),
    ArcZone(from: 40, to: 70, label: 'Fair', color: Color(0xFFEF9F27)),
    ArcZone(from: 70, to: 90, label: 'Good', color: Color(0xFF639922)),
    ArcZone(from: 90, to: 100, label: 'Excellent', color: Color(0xFF378ADD)),
  ];

  static const _creditZones = [
    ArcZone(from: 300, to: 580, label: 'Poor', color: Color(0xFFE24B4A)),
    ArcZone(from: 580, to: 670, label: 'Fair', color: Color(0xFFEF9F27)),
    ArcZone(from: 670, to: 740, label: 'Good', color: Color(0xFF639922)),
    ArcZone(from: 740, to: 850, label: 'Excellent', color: Color(0xFF378ADD)),
  ];

  void _randomize() {
    setState(() {
      _bmi = 10 + (40 - 10) * (DateTime.now().millisecond / 999.0);
      _sleep = (DateTime.now().millisecond / 999.0) * 100;
      _credit = 300 + (850 - 300) * ((DateTime.now().microsecond % 1000) / 999.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('ArcGauge Examples'),
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _randomize,
        icon: const Icon(Icons.shuffle),
        label: const Text('Animate'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 24),
        child: Column(
          children: [
            _section(
              'BMI',
              ArcGauge(value: _bmi, label: 'BMI', zones: _bmiZones),
            ),
            _section(
              'Sleep Score',
              ArcGauge(value: _sleep, label: 'SLEEP SCORE', zones: _sleepZones),
            ),
            _section(
              'Credit Score',
              ArcGauge(value: _credit, label: 'CREDIT', zones: _creditZones),
            ),
          ],
        ),
      ),
    );
  }

  Widget _section(String title, Widget gauge) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Text(
            title,
            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.grey),
          ),
        ),
        const SizedBox(height: 8),
        Center(child: gauge),
        const Divider(height: 48, indent: 32, endIndent: 32),
      ],
    );
  }
}