CODEWITHSUNDEEP
flutteruser-interfacedart
swedishcheef
swedishcheef

Reputation: 567

Add color overlay to CircleAvatar

I am trying to add a color overlay to a circular widget. I want to show a background color with another color laying over it, like this:

enter image description here

I got the circle done like this: const CircleAvatar(radius: 30, backgroundColor: Colors.grey)

Is that something I can achieve using a CircleAvatar, or another widget perhaps?

Upvotes: 0

Views: 480

Answers (2)

Ahmed Raza
Ahmed Raza

Reputation: 540

try this code its working fine https://pub.dev/packages/liquid_progress_indicator

Upvotes: 2

Pathik Patel
Pathik Patel

Reputation: 1510

Check this,

// progress
double progress = 0.5;
// size of circle
double cSize = 200;
Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue.shade100,
  ),
  height: cSize,
  width: cSize,
  child: Stack(
    children: [
      ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(cSize)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            AnimatedContainer(
              duration: new Duration(milliseconds: 500),
              height: cSize * progress,
              width: cSize,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(cSize),
                  bottomRight: Radius.circular(cSize),
                ),
              ),
            ),
          ],
        ),
      ),
      // progress text
      Center(child: Text("${progress * 100}")),
    ],
  ),
),

Upvotes: 1

Related Questions