gonuit / gauge_indicator Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 11.0 19.39 MB

License: MIT License

Dart 95.89% HTML 3.99% Kotlin 0.12%

gauge_indicator's People

Contributors

Stargazers

Watchers

Forkers

ndenerserve webrror sportalliance kalismeras61 cmrnrbs tankaetzer offline-first v-ishchuk minoesteban vhiteshm cwwww24

gauge_indicator's Issues

Segment Painter and Position Incorrect on RadialGauge

The RadialGauge variant paints the segment incorrectly.

Distorted Segment Path

Segment is painted in top left corner.

Container(
                  width: double.infinity,
                  padding: const EdgeInsets.fromLTRB(100, 24, 24, 0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const SizedBox(height: 300),
                      SizedBox(
                        width: 100,
                        child: Builder(
                          builder: (context) {
                            return RadialGauge(
                              value: 75,
                              axis: GaugeAxis(
                                /// Provide the [min] and [max] value for the [value] argument.
                                min: 0,
                                max: 100,

                                /// Render the gauge as a 180-degree arc.
                                degrees: 180,

                                /// Set the background color and axis thickness.
                                style: GaugeAxisStyle(
                                  thickness: 8,
                                  background: Color(0xFFDFE2EC),
                                  segmentSpacing: 4,
                                ),

                                /// Define the progress bar (optional).
                                progressBar: GaugeProgressBar.rounded(
                                  color: Color(0xFF673ab7),
                                ),

                                /// Define axis segments (optional).
                                segments: [
                                  GaugeSegment(
                                    from: 0,
                                    to: 65,
                                    color: Color(0xFFD9DEEB),
                                    cornerRadius: Radius.circular(8),
                                  ),
                                  GaugeSegment(
                                    from: 65,
                                    to: 80,
                                    color: Color(0xFFD9DEEB),
                                    cornerRadius: Radius.circular(8),
                                  ),
                                  GaugeSegment(
                                    from: 80,
                                    to: 100,
                                    color: Color(0xFFD9DEEB),
                                    cornerRadius: Radius.circular(8),
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                      ),
                      const SizedBox(height: 300),
                    ],
                  ),
                ),

0.4.2 - Bugs

Hey, seems that in some update some stuff got broken. The issues that I find are:

Despite setting segments to color: Colors.transparent, they are not transparent.
The segments are ignored entirely in the following scenario.
A new indicator appeared?

Correct (gauge_indicator: 0.4.0-dev.5):

static const List<GaugeSegment> segments = [
    GaugeSegment(from: 0, to: 20.0, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 20.0, to: 40.0, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 40.0, to: 60, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 60.0, to: 80, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 80.0, to: 100, color: someGrey, cornerRadius: Radius.circular(10)),
  ];

AnimatedRadialGauge(
        radius: MediaQuery.of(context).size.width / 2 - SizeConst.WINDOW_INSET,
        duration: const Duration(seconds: 2),
        curve: Curves.fastLinearToSlowEaseIn,
        value: value * 100,
        progressBar: GaugeProgressBar.rounded(
                gradient: GaugeAxisGradient(
                  colors: context.colorScheme.progressGradient,
                  colorStops: const [0, 0.5, 1],
                ),
                placement: GaugeProgressPlacement.inside,
              ),
        axis: GaugeAxis(
          degrees: 180,
          style: GaugeAxisStyle(
            thickness: (MediaQuery.of(context).size.width / 20).bound(18, 24),
            segmentSpacing: 8,
            blendColors: false,
            cornerRadius: const Radius.circular(20),
          ),
          segments: segments,
        ),
      )

Wrong (gauge_indicator: 0.4.2):

static const List<GaugeSegment> segments = [
    GaugeSegment(from: 0, to: 20.0, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 20.0, to: 40.0, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 40.0, to: 60, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 60.0, to: 80, color: someGrey, cornerRadius: Radius.circular(10)),
    GaugeSegment(from: 80.0, to: 100, color: someGrey, cornerRadius: Radius.circular(10)),
  ];


AnimatedRadialGauge(
        radius: MediaQuery.of(context).size.width / 2 - SizeConst.WINDOW_INSET,
        duration: const Duration(seconds: 2),
        curve: Curves.fastLinearToSlowEaseIn,
        value: value,
        axis: GaugeAxis(
          degrees: 180,
          progressBar: GaugeProgressBar.rounded(
                  gradient: GaugeAxisGradient(
                    colors: context.colorScheme.progressGradient,
                    colorStops: const [0, 0.5, 1],
                  ),
                  placement: GaugeProgressPlacement.inside,
                ),
          style: GaugeAxisStyle(
            thickness: (MediaQuery.of(context).size.width / 20).bound(18, 24),
            segmentSpacing: 8,
            blendColors: false,
            cornerRadius: const Radius.circular(20),
          ),
          segments: segments,
        ),
      )

P.s. not included in the code snippets, but I overlap the same widget twice in a stack (the one from behind is blurred and with transparent segments). This is used to achieve a glow for the filled progress bar (as can be seen in the first screenshot). In this case the whole thing glows because the transparent segments are not actually rendered as transparent anymore.

Add Label in Axis

Can i add label in axis to add more clarity each segment ? Thankyou

How to place gauge in row oder column widget?

How can i place this widget inside a row oder column widget?
When i place it inside a row widget (which is a tile in a GridView) i get this error:

BoxConstraints has both a negative minimum width and a negative minimum height.

When will v0.4.0 be released?

Great widget! Looking to use the cornerRadius in segment. When will v0.4.0 be released?

Pointer interactivity

The package currently does not support pointer interactivity. It would be great if the GaugePointer could be draggable by touch.

Like this:

Assertion Error for circle pointer to have color or gradient

The error

_AssertionError ('package:gauge_indicator/src/radial_gauge/pointers/circle_pointer.dart': Failed assertion: line 36 pos 11: '(color != null && gradient == null) ||
              (gradient != null && color == null)': Either color or gradient must be provided.)

can we make color required and pass a gradient to that?

The code

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

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

  @override
  Widget build(BuildContext context) {
    // Create animated radial gauge.
    // All arguments changes will be automatically animated.
    return SizedBox(
      width: 200,
      height: 200,
      child: AnimatedRadialGauge(
        /// The animation duration.
        duration: const Duration(seconds: 1),
        curve: Curves.elasticOut,

        /// Gauge value.
        value: 0.3,

        /// Optionally, you can configure your gauge, providing additional
        /// styles and transformers.
        axis: GaugeAxis(
          max: 100,

          pointer: GaugePointer.circle(radius: 0),

          // pointer: const GaugePointer.(
          //   width: 100,
          //   height: 100,
          //   color: Colors.red,
          //   // size: Size(16, 100),
          //   // borderRadius: 16,
          //   // backgroundColor: Color(0xFF193663),
          // ),

          /// Set the background color and axis thickness.
          style: const GaugeAxisStyle(
            background: Color(0xFFDFE2EC),
            segmentSpacing: 4,
          ),

          /// Define the progress bar (optional).
          progressBar: const GaugeProgressBar.rounded(
            color: Color(0xFFB4C2F8),
          ),

          /// Define axis segments (optional).
          segments: [
            GaugeSegment(
              from: 0,
              to: 33.3,
              color: Theme.of(context).colorScheme.primary,
            ),
            GaugeSegment(
              from: 33.3,
              to: 66.6,
              color: Theme.of(context).colorScheme.error,
            ),
            const GaugeSegment(
              from: 66.6,
              to: 100,
              color: Color(0xFFD9DEEB),
            ),
          ],

          /// You can also, define the child builder.
          /// You will build a value label in the following way, but you can use the widget of your choice.
          ///
          /// For non-value related widgets, take a look at the [child] parameter.
          /// ```
          /// builder: (context, child, value) => RadialGaugeLabel(
          ///  value: value,
          ///  style: const TextStyle(
          ///    color: Colors.black,
          ///    fontSize: 46,
          ///    fontWeight: FontWeight.bold,
          ///  ),
          /// ),
          /// ```
          ///
        ),
      ),
    );
  }
}

Possible to give height spesific GaugeSegment ?

Hello thanks for this amazing package, i want to change spesific GaugeSegment height according to my value. Is this possible ? @gonuit

Pointer's shadow offset is not used in the drawPointer method.

You should translate the path before drawing the pointer.shadow here:

    if (pointer.shadow != null) {
      canvas.drawPath(path, pointer.shadow!.toPaint());
    }

Please, use pointer.shadow!.offset for this purpose.

Support negative values

The package currently does not support negative values. I would be great to add some scaling to the inputs to support this.

The example values that i used:
min: -3000,
max: 3000,
value: -750,

Rounded progress bar draws excess curves when the value is zero.

Hi! Nice widget, thanks. Although, there is a bug.
When the value arc is shorter than ending radius, the endings must be clipped or something.

AnimatedRadialGauge(
  duration: const Duration(milliseconds: 400),
  value: _soundLevel,
  axis: GaugeAxis(
    min: 0.0,
    max: 150.0,
    degrees: 250.0,
    progressBar: GaugeProgressBar.rounded(color: Colors.green),
  ),
),

Shader examples

Hi thanks again for your great package, where can we find the shader examples?

Thanks in advance!

Update example of Readme / More simpler example in file?

Hi,
If im not mistaken, we need a sized box for the example of the readme to actually work.
It also is not really obvious with the API whether "value" is 0 to 1 or 0 to 100 or something like that.

I can write a PR if needed.
Thanks,