customgauge 1.0.1

Fully customizable Gauge widget for Flutter with options for multiple segments, colors and customizable styling for displaying current value and text

example/lib/main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
      appBar: AppBar(
        title: const Text('CustomGauge example app'),
      ),
      body: Container(
          color: Colors.grey[200],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,            
            children: <Widget>[
            Row(children: <Widget>[
              CustomGauge(
                gaugeSize: 200,
                segments: [
                  GaugeSegment('Low', 20, Colors.red),
                  GaugeSegment('Medium', 40, Colors.orange),
                  GaugeSegment('High', 40, Colors.green),
                ],
                currentValue: 60,
                displayWidget:
                    Text('Fuel in tank', style: TextStyle(fontSize: 12)),
              ),
              CustomGauge(
                gaugeSize: 200,
                segments: [
                  GaugeSegment('Critically Low', 10, Colors.red),
                  GaugeSegment('Low', 20, Colors.orange),
                  GaugeSegment('Medium', 20, Colors.yellow),
                  GaugeSegment('High', 50, Colors.green),
                ],
                currentValue: 45,
                needleColor: Colors.red,
                showMarkers: false,
                displayWidget:
                    Text('Fuel in tank', style: TextStyle(fontSize: 12)),
              ),
            ]),
            Row(children: <Widget>[
              CustomGauge(
                gaugeSize: 100,
                segments: [
                  GaugeSegment('Low', 20, Colors.blue[200]),
                  GaugeSegment('Medium', 40, Colors.blue),
                  GaugeSegment('High', 40, Colors.blue[800]),
                ],
                currentValue: 70,
                displayWidget:
                    Text('Temp', style: TextStyle(fontSize: 12)),
              ),
              CustomGauge(
                gaugeSize: 100,
                segments: [
                  GaugeSegment('Critically Low', 10, Colors.red),
                  GaugeSegment('Low', 20, Colors.orange),
                  GaugeSegment('Medium', 20, Colors.yellow),
                  GaugeSegment('High', 50, Colors.green),
                ],
                currentValue: 45,
                needleColor: Colors.blue,
                showMarkers: false,
                valueWidget: Container(),
                displayWidget:
                    Text('Fuel', style: TextStyle(fontSize: 12)),
              ),
              CustomGauge(
                gaugeSize: 100,
                minValue: 30,
                maxValue: 150,
                segments: [
                  GaugeSegment('Low', 20, Colors.red),
                  GaugeSegment('Slightly Low', 20, Colors.yellow),
                  GaugeSegment('Correct', 20, Colors.green),
                  GaugeSegment('High', 60, Colors.orange),
                ],
                currentValue: 72,
                displayWidget:
                    Text('Pulse', style: TextStyle(fontSize: 12)),
              ),
              CustomGauge(
                minValue: 0,
                maxValue: 150,
                gaugeSize: 100,
                segments: [
                  GaugeSegment('Good', 80, Colors.green),
                  GaugeSegment('High', 70, Colors.red),
                ],
                currentValue: 75,
                showMarkers: false,
                displayWidget:
                    Text('Speed', style: TextStyle(fontSize: 12)),
              ),
            ])
          ])),
    ));
  }
}