CODEWITHSUNDEEP
androidiosflutterdart
Shreyansh Sharma
Shreyansh Sharma

Reputation: 1824

How can i color half of my CircleAvatar with one color, and aother half with another in flutter

I want to color half of my Circle Avatar as Dark Blue and other half to be Light Blue. I mean Exactly half. How can I achieve this?

Just Like them -

enter image description here

I tried this, but it didn't worked -

Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color(0xFF040663),
                Color(0xFF434599),
              ],
            ),
          ),
          child: CircleAvatar(
            backgroundColor: Colors.transparent,
            radius: MediaQuery.of(context).size.height*0.045,
            child: Icon(
              icon,
              size: size,
              color: Colors.white,
            ),
          ),
        ),

Can someone tell me how can i edit this code, or tell me a new way to achieve this?

Upvotes: 3

Views: 1790

Answers (1)

Afridi Kayal
Afridi Kayal

Reputation: 2285

You are almost there. You need to repeat a color in the gradient and use the stops property to get a sharp gradient.

return Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.purple,
            Colors.purple,
            Colors.blue,
          ],
          stops: [
            0, 0.5, 0.5
          ]
        ),
      ),
      child: Icon(
        Icons.camera,
        size: 32,
        color: Colors.white,
      ),
    );

Here is the result:

Result

Refer to the stops property documentation for more information: https://api.flutter.dev/flutter/painting/Gradient/stops.html

Upvotes: 9

Related Questions