gonuit / gauge_indicator

MIT License
31 stars 12 forks source link

Segment Painter and Position Incorrect on RadialGauge #17

Open rayliverified opened 5 months ago

rayliverified commented 5 months ago

The RadialGauge variant paints the segment incorrectly.

Distorted Segment Path image

Segment is painted in top left corner. image

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),
                    ],
                  ),
                ),
walus90 commented 1 month 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: image 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),
            ),
          )
        ],
      ),
    );