Feature Request: Multiple overlapping percent strokes.

[vedantrathore]

Hello @diegoveloper , Thanks for this amazing package. I was wondering if there is any support for multiple percent strokes, preferably overlapping. Something like this

If not, then I'd like to work on this feature and send out a PR. Just want to know your thoughts on how should we proceed in implementing this.

[diegoveloper]

Hello, this is not supported right now. If you want to implement this feature, go ahead you are welcome! Just don't forget to do it on LinearPercentIndicator too and add a couple of samples.

Thanks

On Thu, Jul 23, 2020, 2:44 AM Vedant Rathore [email protected] wrote:

Hello @diegoveloper https://github.com/diegoveloper , Thanks for this amazing package. I was wondering if there is any support for multiple percent strokes, preferably overlapping. Something like this [image: image] https://user-images.githubusercontent.com/14354315/88257907-7968bc80-ccdc-11ea-90eb-c6bf54034b3f.png

If not, then I'd like to work on this feature and send out a PR. Just want to know your thoughts on how should we proceed in implementing this.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/68, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UE6AMDXA36RXMR3ABDR47S7PANCNFSM4PFOQVPA .

[Lorenzohidalgo]

@vedantrathore did you end up developing this feature? I'm currently searching for the same feature but for the LinearPercentIndicator...

[om-ha]

Hey @diegoveloper and @vedantrathore , is this feature supported?

[vedantrathore]

Hey @Lorenzohidalgo and @om-ha Unfortunately I did not end up working on this as the design requirements for this feature changed and this was not needed anymore.

Feel free to pick this up if needed.

[om-ha]

Hey @vedantrathore and @diegoveloper

I just tested this, it's easily achievable with a Stack widget!

Enjoy:

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

class MultiLevelPercentIndicatorExample extends StatelessWidget {
  const MultiLevelPercentIndicatorExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: const [
          SizedBox(height: 36),
          _MultiLevelPercentIndicatorWidget(),
          Spacer(),
        ],
      ),
    );
  }
}

class _MultiLevelPercentIndicatorWidget extends StatelessWidget {
  const _MultiLevelPercentIndicatorWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Background
    return Container(
      height: 8,
      padding: const EdgeInsets.all(2),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        color: Colors.redAccent.shade100,
      ),
      child: Stack(
        children: [
          // low-intensity color (bottom)
          LinearPercentIndicator(
            padding: const EdgeInsets.symmetric(horizontal: 2), // for some reason we need to re-apply padding for horizontal
            percent: 0.8,
            backgroundColor: Colors.transparent,
            progressColor: Colors.redAccent.shade100,
          ),
          // high-intensity color (top)
          LinearPercentIndicator(
            padding: const EdgeInsets.symmetric(horizontal: 2), // for some reason we need to re-apply padding for horizontal
            percent: 0.4,
            backgroundColor: Colors.transparent,
            progressColor: Colors.redAccent.shade400,
          ),
        ],
      ),
    );
  }
}

[DhrumilShah11]

This Worked for me, but this only works if one has fixed amount of metrics

 Stack(
                      children: [
                        new CircularPercentIndicator(
                          radius: 130.0,
                          animation: true,
                          animationDuration: 1200,
                          lineWidth: 15.0,
                          percent: 0.60,
                          center: new Text(
                            "60 %",
                            style: new TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 20.0),
                          ),
                          circularStrokeCap: CircularStrokeCap.round,
                          backgroundColor: Colors.orange,
                          progressColor: colorPrimary,
                        ),
                        new CircularPercentIndicator(
                          radius: 130.0,
                          animation: true,
                          animationDuration: 1200,
                          lineWidth: 15.0,
                          percent: 0.45,
                          center: new Text(
                 
           "60 %",
                            style: new TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 20.0),
                          ),
                          circularStrokeCap: CircularStrokeCap.round,
                          backgroundColor: colorTransparent,
                          progressColor: colorRed,
                        ),
                      ],
                    ),

[ymerdrengene]

Will this be picked up?