gauge_indicator 0.1.0

gauge_indicator: ^0.1.0 copied to clipboard

example/lib/main.dart

import 'dart:math';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const GaugeExamplePage(),
    );
  }
}

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

  @override
  State<GaugeExamplePage> createState() => _GaugeExamplePageState();
}

const colors = [
  Colors.green,
  Color(0xFF34C759),
  Colors.amber,
  Colors.red,
  Colors.blue,
  Colors.blueAccent,
  Colors.lightBlue,
  Colors.grey,
  Colors.black,
  Color(0xFFD9DEEB),
];

class _GaugeExamplePageState extends State<GaugeExamplePage> {
  double value = 65;
  double _sliderValue = 65;
  double _degree = 180;
  double _parentWidth = 150;
  double _parentHeight = 150;
  double _thickness = 12;
  double _spacing = 4;
  double _fontSize = 18;
  double _pointerSize = 16;

  var _segments = const <GaugeSegment>[
    GaugeSegment(
      from: 0,
      to: 33.3,
      color: Color(0xFFD9DEEB),
    ),
    GaugeSegment(
      from: 33.3,
      to: 66.6,
      color: Color(0xFF34C759),
    ),
    GaugeSegment(
      from: 66.6,
      to: 100,
      color: Color(0xFFD9DEEB),
    ),
  ];

  void _randomizeSegments() {
    final random = Random();
    final a = random.nextDouble() * 100;
    final b = random.nextDouble() * 100;
    final stops = a > b ? [b, a] : [a, b];
    setState(() {
      _segments = <GaugeSegment>[
        GaugeSegment(
          from: 0,
          to: stops[0],
          color: colors[random.nextInt(colors.length)],
        ),
        GaugeSegment(
          from: stops[0],
          to: stops[1],
          color: colors[random.nextInt(colors.length)],
        ),
        GaugeSegment(
          from: stops[1],
          to: 100,
          color: colors[random.nextInt(colors.length)],
        ),
      ];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: const BoxDecoration(
                border: Border(right: BorderSide(color: Color(0xFFDDDDDD))),
              ),
              width: 350,
              child: Column(
                children: [
                  const PackageTitle(),
                  Expanded(
                    child: ListView(
                      children: [
                        ValueSlider(
                          label: "Value",
                          min: 0,
                          max: 100,
                          value: _sliderValue,
                          onChanged: (val) {
                            setState(() {
                              _sliderValue = val;
                            });
                          },
                          onChangeEnd: (newVal) {
                            setState(() {
                              value = newVal;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Degrees",
                          min: 30,
                          max: 360,
                          value: _degree,
                          onChanged: (val) {
                            setState(() {
                              _degree = val;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Thickness",
                          min: 5,
                          max: 40,
                          value: _thickness,
                          onChanged: (val) {
                            setState(() {
                              _thickness = val;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Spacing",
                          min: 0,
                          max: 20,
                          value: _spacing,
                          onChanged: (val) {
                            setState(() {
                              _spacing = val;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Pointer size",
                          min: 16,
                          max: 36,
                          value: _pointerSize,
                          onChanged: (val) {
                            setState(() {
                              _pointerSize = val;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Font size",
                          min: 8,
                          max: 48,
                          value: _fontSize,
                          onChanged: (val) {
                            setState(() {
                              _fontSize = val;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Parent height",
                          min: 150,
                          max: 500,
                          value: _parentHeight,
                          onChanged: (val) {
                            setState(() {
                              _parentHeight = val;
                            });
                          },
                        ),
                        ValueSlider(
                          label: "Parent width",
                          min: 150,
                          max: 500,
                          value: _parentWidth,
                          onChanged: (val) {
                            setState(() {
                              _parentWidth = val;
                            });
                          },
                        ),
                        Center(
                          child: ElevatedButton(
                            onPressed: _randomizeSegments,
                            child: const Text("Randomize segments"),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,

                /// Gauge widget requires a constrained dimensions, therefore,
                /// it is important to wrap Gauge widget with a widget like [SizedBox].
                /// This will be resolved after migration to the RenderBox.
                children: [
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: const Color(0xFFEFEFEF),
                      ),
                    ),
                    width: _parentWidth,
                    height: _parentHeight,
                    child: AnimatedRadialGauge(
                      duration: const Duration(milliseconds: 2000),
                      curve: Curves.elasticOut,
                      min: 0,
                      max: 100,
                      value: value,
                      style: GaugeStyle(
                        labelStyle: TextStyle(
                          color: const Color(0xFF002E5F),
                          fontSize: _fontSize,
                          fontWeight: FontWeight.bold,
                        ),
                        labelAlignment: Alignment.bottomCenter,
                      ),
                      labelProvider: const GaugeLabelProvider.value(
                        curve: Interval(0.0, 0.2, curve: Curves.easeOut),
                      ),
                      axis: GaugeAxis(
                        degrees: _degree,
                        pointer: RoundedTrianglePointer(
                          size: _pointerSize,
                          borderRadius: _pointerSize * 0.125,
                          backgroundColor: const Color(0xFF002E5F),
                          border: GaugePointerBorder(
                            color: Colors.white,
                            width: _pointerSize * 0.125,
                          ),
                        ),
                        transformer: const GaugeAxisTransformer.colorFadeIn(
                          interval: Interval(0.0, 0.3),
                          background: Color(0xFFD9DEEB),
                        ),
                        style: GaugeAxisStyle(
                          thickness: _thickness,
                          segmentSpacing: _spacing,
                          blendColors: false,
                        ),
                        segments: _segments,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class PackageTitle extends StatelessWidget {
  const PackageTitle({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: double.infinity,
      margin: const EdgeInsets.only(bottom: 16),
      padding: const EdgeInsets.all(16),
      decoration: const BoxDecoration(
          border: Border(
        bottom: BorderSide(
          color: Color(0xFFDDDDDD),
        ),
      )),
      child: const Text(
        "gauge_indicator",
        style: TextStyle(
          fontSize: 24,
        ),
      ),
    );
  }
}

class ValueSlider extends StatelessWidget {
  final String label;
  final double value;
  final ValueChanged<double> onChanged;
  final ValueChanged<double>? onChangeEnd;
  final double min;
  final double max;

  const ValueSlider({
    Key? key,
    required this.label,
    required this.onChanged,
    this.onChangeEnd,
    required this.value,
    required this.min,
    required this.max,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: Text(
            "$label: ${value.toStringAsFixed(2)}",
            style: const TextStyle(
              fontSize: 16,
            ),
          ),
        ),
        Slider(
          min: min,
          max: max,
          value: value,
          onChanged: onChanged,
          onChangeEnd: onChangeEnd,
        ),
      ],
    );
  }
}