Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a parameter to allow customising radial track labels #246

Closed
wants to merge 4 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -167,6 +167,12 @@ Default **`endAngle`**`: 210°

<p align='center'><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-angles.png" alt="radial-angels" height=440></p>

#### Custom Track Labels

The labels displayed on the RadialGauge track can easily be formated to your need.

<p align='center'><img src="example/screens/radial-custom-track-label.png" alt="radial-gauge-custom-track-label" height=440></p>

#### **Radii Customization**

`radiusFactor` can be used to size the adjust the scaling factor of the radius and change the radius of the gauge accordingly.
32 changes: 32 additions & 0 deletions example/lib/radial_gauge_custom_label.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import 'package:flutter/material.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';

///
/// The following code is a Simple Example of [RadialGauge] Widget with custom track labels.
///
class RadialGaugeCustomLabel extends StatefulWidget {
const RadialGaugeCustomLabel({super.key});

@override
State<RadialGaugeCustomLabel> createState() => _RadialGaugeCustomLabelState();
}

class _RadialGaugeCustomLabelState extends State<RadialGaugeCustomLabel> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: RadialGauge(
track: RadialTrack(
color: Colors.grey,
start: 0,
end: 100,
mapTrackLabel: (double value) => "${value.round()}€",
trackStyle: const TrackStyle(
showFirstLabel: false,
showLastLabel: false,
)),
),
);
}
}
Binary file added example/screens/radial-custom-track-label.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion lib/src/radial_gauge/radial_gauge_container_painter.dart
Original file line number Diff line number Diff line change
@@ -54,6 +54,9 @@ class RenderRadialGaugeContainer extends RenderBox {
..strokeWidth = getRadialGauge.track.trackStyle.secondaryRulersWidth!
..style = PaintingStyle.stroke;

final mapTrackLabel = getRadialGauge.track.mapTrackLabel ??
(double value) => value.toString();

// Loop to draw the Rulers and Labels
for (int i = 0; i <= numParts; i++) {
double rulerOffset = getRadialGauge.track.trackStyle.rulersOffset ?? 0;
@@ -130,7 +133,7 @@ class RenderRadialGaugeContainer extends RenderBox {
start + double.parse(((l / range) * valueRange).toStringAsFixed(2));
Color textColor = Colors.black;
textPainter.text = TextSpan(
text: exactValue.toString(),
text: mapTrackLabel(exactValue),
style: getRadialGauge.track.trackStyle.labelStyle ??
TextStyle(color: textColor, fontWeight: FontWeight.bold));
textPainter.layout();
16 changes: 16 additions & 0 deletions lib/src/radial_gauge/radial_track.dart
Original file line number Diff line number Diff line change
@@ -63,6 +63,7 @@ class RadialTrack {
secondaryRulerPerInterval: 4.0,
),
this.gradient,
this.mapTrackLabel,
});

///
@@ -121,6 +122,21 @@ class RadialTrack {
/// The [trackStyle] property is used to customize the track of the Radial Gauge.
///
final TrackStyle trackStyle;

///
/// The [mapTrackLabel] property is used to customize the track labels of the Radial Gauge.
Copy link
Contributor

@hasnentai hasnentai Aug 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add an example code here ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your reactivity. I add some example here, in the example directory and a screenshot in the README.

///
/// ``` dart
/// RadialGauge(
/// track: RadialTrack(
/// start: 0,
/// end: 100,
/// mapTrackLabel: (double value) => "${value.round()}€",
/// ),
/// ),
/// ```
///
final String Function(double)? mapTrackLabel;
}

class TrackStyle extends BaseRulerStyle {