how to do the background of the circle

[superciccio]

Hi,

your library is very good, I do have a question.

now I'm doing this (see image)

` CircularPercentIndicator( radius: 200.0, lineWidth: 10.0, percent: _percent, animation: true, fillColor: UIConstant.backgroundColor, animateFromLastPercent: true, center: SizedBox( child: Stack( children: [

            ],
          ),
          height: 180,
          width: 200,
        ),
        backgroundColor: UIConstant.darkColor,
        progressColor: UIConstant.lightColor,
      ),

`

I only want fillcolor to be the background of the circle.

how can I achieve that ?

also Container is creating a square instead of clipping should we use ClipRRect to the container

Thanks

[diegoveloper]

Yes, you can use cliprrect or clipoval

On Sun, May 17, 2020, 6:06 AM Andrea Bittau notifications@github.com wrote:

Hi,

your library is very good, I do have a question.

now I'm doing this (see image)

`CircularPercentIndicator( radius: 200.0, lineWidth: 10.0, percent: _percent, animation: true, fillColor: UIConstant.backgroundColor, animateFromLastPercent: true, center: SizedBox( child: Stack( children: [

        ],
      ),
      height: 180,
      width: 200,
    ),
    backgroundColor: UIConstant.darkColor,
    progressColor: UIConstant.lightColor,
  ),`

I only want fillcolor to be the background of the circle.

how can I achieve that ?

also Container is creating a square instead of clipping should we use ClipRRect to the container

[image: Screenshot_1589713193] https://user-images.githubusercontent.com/4390182/82142793-db1d2e00-9836-11ea-987c-606ff1f3201d.png

Thanks

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UCEUBNRXSGTXD7ZCSLRR7AM7ANCNFSM4NDKV4IA .

[superciccio]

thanks for the reply. still something doesn't look quite right

look at the end of the circle I've tried different clipbehaviour none of them fix this.

any idea ? :)

[diegoveloper]

Add a Container with color Add circularpercentindicator Wrap all inside ClipOval but add a different radius , more that you have in the circle

On Sun, May 17, 2020, 10:43 AM Andrea Bittau notifications@github.com wrote:

thanks for the reply. still something doesn't look quite right

[image: Screenshot_1589730046] https://user-images.githubusercontent.com/4390182/82153119-745f3b00-985d-11ea-9e35-51e56118c0cf.png

look at the end of the circle I've tried different clipbehaviour none of them fix this.

any idea ? :)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56#issuecomment-629818032, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UASIQH4RC7JKKEU5ZLRSAA3HANCNFSM4NDKV4IA .

[superciccio]

that didn't work, but is a better now ! the line that draws the percentage is a bit rocky tho :/

[diegoveloper]

What is the code and the result

On Sun, May 17, 2020, 10:56 AM Andrea Bittau notifications@github.com wrote:

that didn't work, but is a better now ! the line that draws the percentage is a bit rocky tho :/

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56#issuecomment-629819665, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UFXLBGHKARKE4VJ4KLRSACLZANCNFSM4NDKV4IA .

[superciccio]

https://gist.github.com/superciccio/3e32377bd6cfbcbc4520caafd0137797

I also change the height of the container height: widget.radius + widget.lineWidth, I removed the lineWidth cause before there was a a little space between the inner and outer circle

[diegoveloper]

You need something like this :

ClipOval Padding Container //no decoration, use -> color: UIConstant.darkColor, CicularPercentIndicator

• Diego Velásquez www.diegoveloper.com http://www.diegoveloper.com*

On Sun, May 17, 2020 at 11:02 AM Andrea Bittau notifications@github.com wrote:

https://gist.github.com/superciccio/3e32377bd6cfbcbc4520caafd0137797

[image: Screenshot_1589731239] https://user-images.githubusercontent.com/4390182/82153539-f2bcdc80-985f-11ea-934e-9417d02add26.png

I also change the height of the container height: widget.radius + widget.lineWidth, cause before there was a a little space between the inner and outer circle

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56#issuecomment-629820393, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UCLYSSEC76TVUM5QU3RSADAPANCNFSM4NDKV4IA .

[superciccio]

then I come back to ground 0 the square around the circle, which i don't want

[superciccio]

and also the line is still rocky at the edge

[diegoveloper]

code please

On Sun, May 17, 2020 at 11:18 AM Andrea Bittau notifications@github.com wrote:

and also the line is still rocky at the edge

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56#issuecomment-629822873, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UF7WRTMD6IXSWVUMSDRSAE4PANCNFSM4NDKV4IA .

[superciccio]

I've updated the gist

https://gist.github.com/superciccio/3e32377bd6cfbcbc4520caafd0137797

with the colour that I'm using

basically I want the circle background blue, the line of the progress Color.fromRGBO(162, 201, 238, 1.0)

[diegoveloper]

I guess I was wrong, use ClipOval > Container > Padding> CircularPercent

Use a bigger padding like 2 o 3

On Sun, May 17, 2020 at 11:25 AM Andrea Bittau notifications@github.com wrote:

I've updated the gist

https://gist.github.com/superciccio/3e32377bd6cfbcbc4520caafd0137797

with the colour that I'm using

basically I want the circle background blue, the line of the progress Color.fromRGBO(162, 201, 238, 1.0)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56#issuecomment-629823937, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UF6XML23BSWAB7DQL3RSAFV7ANCNFSM4NDKV4IA .

[superciccio]

nope, it doesn't make any difference. also if you use clipoval you don't have a full circle (the edges left and right are very rough)

[superciccio]

and I still have the square around the circle (which I don't want)

[diegoveloper]

Check this sample I created : https://dartpad.dev/a76e2483e9c40bc98388df0de6a589d5

On Sun, May 17, 2020 at 11:34 AM Andrea Bittau notifications@github.com wrote:

and I still have the square around the circle (which I don't want)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/56#issuecomment-629825263, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UFQVB4YNJUQOCBHFV3RSAGZRANCNFSM4NDKV4IA .

[superciccio]

the dartpad works, as expected but your plugin creates the square in my code which I don't get why... like I said to not have it. I've to do this

decoration: BoxDecoration( color: UIConstant.darkColor, borderRadius: BorderRadius.circular(100)), clipBehavior: Clip.antiAliasWithSaveLayer,

thanks anyway I'll keep it like this (no square and clipping)

[crushman1]

Hi, just to add to the various work-arounds. What i was able to do was wrap the percentage text in a Container and make the container shape circle. you get the desired effect that was expected from fillColor

new CircularPercentIndicator(
                          reverse: true,
                          arcType: ArcType.FULL,
                          backgroundColor: Colors.white30,
                          animationDuration: 2000,
                          animation: true,
                          circularStrokeCap: CircularStrokeCap.round,
                          radius: 60.0,
                          lineWidth: 5.0,
                          percent: 0.5,
                          center: Container(
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.white30
                            ),
                              child: Center(child: new Text("50%", style: TextStyle(fontWeight: FontWeight.bold),))),
                          progressColor: Colors.black,
                        )

[Oliver530]

Unfortunately, no workaround worked properly for me. In the end, I decided to work with a stack:

CircularPercentIndicator(
      radius: 50,
      lineWidth: 6,
      animation: true,
      percent: 0.5,
      backgroundColor: Colors.white,
      circularStrokeCap: CircularStrokeCap.round,
      progressColor: rating.color,
      center: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
            ),
          ),
          Text(
            rating.value.toString(),
            style: TextStyle(
              color: rating.color,
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          )
        ],
      ),
    )