Open rayliverified opened 5 months ago
Hi! I have a similar issue. I want to set 2 RadialGauges in the row, each with different segments. Looks like the segments appear only in the top left corner: The code:
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RadialGauge(
radius: 200,
axis: GaugeAxis(
segments: [
GaugeSegment(color: Colors.blue, from: 0, to: 25),
GaugeSegment(color: Colors.green, from: 25, to: 50),
GaugeSegment(color: Colors.yellow, from: 50, to: 75),
GaugeSegment(color: Colors.red, from: 75, to: 100),
],
min: 0,
max: 100,
),
value: 60,
),
SizedBox(width: 20),
RadialGauge(
radius: 200,
axis: GaugeAxis(
segments: [
GaugeSegment(color: Colors.purple, from: 0, to: 30),
GaugeSegment(color: Colors.orange, from: 30, to: 60),
GaugeSegment(color: Colors.pink, from: 60, to: 90),
GaugeSegment(color: Colors.teal, from: 90, to: 120),
],
min: 0,
max: 120,
),
value: 80,
),
],
),
const SizedBox(
height: 20.0,
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyApp(),
),
);
},
child: const Text(
"Sensors view",
style: TextStyle(fontSize: 40.0),
),
)
],
),
);
The RadialGauge variant paints the segment incorrectly.
Distorted Segment Path
Segment is painted in top left corner.