gonuit / gauge_indicator Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
The RadialGauge variant paints the segment incorrectly.
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),
],
),
),
Hey, seems that in some update some stuff got broken. The issues that I find are:
color: Colors.transparent
, they are not transparent.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,
),
)
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.
Can i add label in axis to add more clarity each segment ? Thankyou
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.
Great widget! Looking to use the cornerRadius
in segment. When will v0.4.0 be released?
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,
/// ),
/// ),
/// ```
///
),
),
);
}
}
Hello thanks for this amazing package, i want to change spesific GaugeSegment height according to my value. Is this possible ? @gonuit
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.
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,
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),
),
),
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,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.