range_score_gauge 0.0.1

range_score_gauge: ^0.0.1 copied to clipboard

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'range_score_gauge example',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const ExampleHomePage(),
    );
  }
}

/// Fixed-value demos (no sliders) — each shows one gauge configuration at
/// a single point on its range.
class ExampleHomePage extends StatelessWidget {
  const ExampleHomePage({super.key});

  // Variant A: numeric boundary labels, reference screenshot's config.
  static const _numericValue = 38.0;
  static const _numericSegments = [
    // showLabel: false demos hiding just this one boundary's label.
    GaugeSegment(end: 36, color: Color(0xFFFFD54F)), // yellow
    GaugeSegment(end: 50, color: Color(0xFFFF8A50)), // orange
    GaugeSegment(end: 75, color: Color(0xFF66E39C)), // light green
    GaugeSegment(end: 96, color: Color(0xFF3FBE7A)), // medium green
    GaugeSegment(end: 150, color: Color(0xFF1F7A4D)), // dark green
  ];

  // Variant B: category labels.
  static const _categoryValue = 8.0;
  static const _categorySegments = [
    GaugeSegment(end: 33, color: Color(0xFF00C2CB), label: 'Low'),
    GaugeSegment(end: 66, color: Color(0xFF2E9E4F), label: 'Medium'),
    GaugeSegment(end: 100, color: Color(0xFFFF9800), label: 'High'),
  ];

  // Third demo: a different segment count/colors, to show general reuse.
  static const _customValue = 1.5;
  static const _customSegments = [
    GaugeSegment(end: 1, color: Color(0xFFB71C1C), label: 'Critical'),
    GaugeSegment(end: 2, color: Color(0xFFEF6C00), label: 'Warning'),
    GaugeSegment(end: 3, color: Color(0xFF2E7D32), label: 'Stable'),
    GaugeSegment(end: 4, color: Color(0xFF1565C0), label: 'Optimal'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('range_score_gauge')),
      body: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          const Text(
            'Variant A — numeric boundary labels',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
          const SizedBox(height: 16),
          RangeScoreGauge(
            value: _numericValue,
            min: 0,
            max: 150,
            segments: _numericSegments,
            segmentGap: 2,
            labelPosition: GaugeLabelPosition.boundary,
            showMinLabel: true,
            labelStyle: const TextStyle(fontSize: 12, color: Colors.black54),
          ),
          const Divider(height: 48),
          const Text(
            'Gradient fill — same segments, blended',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
          const SizedBox(height: 16),
          RangeScoreGauge(
            height: 15,
            borderRadius: 0,
            value: _numericValue,
            min: 0,
            max: 150,
            segments: _numericSegments,
            fillStyle: GaugeFillStyle.gradient,
            labelPosition: GaugeLabelPosition.boundary,
            showMinLabel: true,
            labelStyle: const TextStyle(fontSize: 12, color: Colors.black54),
          ),
          const Divider(height: 48),
          const Text(
            'Variant B — category labels',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
          const SizedBox(height: 16),
          RangeScoreGauge(
            height: 15,
            borderRadius: 0,
            value: _categoryValue,
            min: 0,
            max: 100,
            segments: _categorySegments,
            labelPosition: GaugeLabelPosition.segmentCenter,
            labelStyle: const TextStyle(fontSize: 12, color: Colors.black54),
          ),
          const Divider(height: 48),
          const Text(
            'Custom config — 4 segments, custom marker',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
          const SizedBox(height: 16),
          RangeScoreGauge(
            value: _customValue,
            min: 0,
            max: 4,
            segments: _customSegments,
            labelPosition: GaugeLabelPosition.segmentCenter,
            labelStyle: const TextStyle(fontSize: 12, color: Colors.black54),
            // markerSize is the marker's actual rendered footprint now —
            // the Icon below is scaled to fit it regardless of its own
            // `size:`, so the two no longer need to match.
            markerSize: 28,
            markerBuilder: (context, value) => const RotatedBox(
              quarterTurns: 1,
              child: Icon(Icons.play_arrow, color: Colors.black87),
            ),
          ),
        ],
      ),
    );
  }
}