another_gauge 1.1.1

Another customizable Gauge widget for Flutter, with automatic needle and cap color

example/lib/main.dart

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

import 'examples/example_1.dart';
import 'examples/example_2.dart';
import 'examples/example_3.dart';
import 'examples/example_4.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ValueNotifier<double> valueNotifier = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    ValueNotifier<bool> tickNotifier = ValueNotifier(false);
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text('AnotherGauge examples'),
            ),
            body: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Main tick value'),
                      StatefulBuilder(builder: (context, setState) {
                        return Switch(
                            value: tickNotifier.value,
                            onChanged: (value) => setState(() => tickNotifier.value = !tickNotifier.value));
                      }),
                      ElevatedButton(
                          onPressed: () {
                            valueNotifier.value += 15;
                          },
                          child: Text('Increment')),
                      SizedBox(
                        width: 16,
                      ),
                      ElevatedButton(
                          onPressed: () {
                            valueNotifier.value -= 15;
                          },
                          child: Text('Decrement')),
                    ],
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(32.0),
                    child: ListView(
                      children: [
                        Container(
                          color: Colors.grey[200],
                          child: ValueListenableBuilder(
                              valueListenable: tickNotifier,
                              builder: (context, val, child) {
                                return AnotherGauge(
                                  valueNotifier: valueNotifier,
                                  capBorderColor: Colors.white,
                                  capBorderWidth: 10,
                                  capSize: 80,
                                  capColor: Colors.white10,
                                  faceBorderColor: Colors.blueGrey.shade800,
                                  faceStartColor: Colors.teal,
                                  faceEndColor: Colors.cyan,
                                  faceBorderWidth: 15,
                                  subTicksColor: Colors.white,
                                  needleColor: Colors.white,
                                  showMainTickValue: tickNotifier.value,
                                  mainTicksColor: Colors.white,
                                  rangeNeedleColor: true,
                                  frameAngle: 0,
                                  frameColor: Colors.blueGrey.shade600,
                                  segmentWidth: 15,
                                  showFrame: false,
                                  gaugeSize: 350,
                                  needleStartAngle: 135,
                                  needleSweepAngle: 270,
                                  ranges: [
                                    GaugeRange(Colors.green),
                                    GaugeRange(Colors.orange),
                                    GaugeRange(Colors.red),
                                  ],
                                  valuePadding: EdgeInsets.only(bottom: 90),
                                  valueSymbol: 'km/h',
                                  valueFontColor: Colors.white,
                                  displayWidget: Padding(
                                    padding: const EdgeInsets.only(top: 36.0),
                                    child: const Text('Speed',
                                        style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold)),
                                  ),
                                  minValue: 0,
                                  maxValue: 280,
                                  mainTicksStep: 20,
                                );
                              }),
                        ),
                        const SizedBox(
                          height: 32,
                        ),
                        Example1(
                          valueNotifier: valueNotifier,
                        ),
                        const SizedBox(
                          height: 32,
                        ),
                        Example2(
                          valueNotifier: valueNotifier,
                          tickNotifier: tickNotifier,
                        ),
                        const SizedBox(
                          height: 32,
                        ),
                        Example3(),
                        const SizedBox(
                          height: 32,
                        ),
                        Example4(),
                      ],
                    ),
                  ),
                ),
              ],
            )));
  }
}