flutterdartflutter-custompainter

Flutter half circle with multiple fill colors


I would like to create this in Flutter:

Enter image description here

I know you can create a half circle like this.

But how I can get these multiple fill colors?

I know there is way to get this done with LinearGradient. (something like this)

But this might work, but I need to each color-section as a separated part/widget because I want to animate them in the next step.

How could I get this done?


Solution

  • You can do this using Custom Painter but then I understand it would be challenging to animate each color bar. I have been able to create something like you need

    demo

    I used the ClipRRect widget to cut out the bottomLeft and bottomRight portions of a square -> SemiCircle.

    Each Color bar is a Container and since you would like to animate each bar you can easily replace the Container with an AnimatedContainer and proceed from there. You might also need to make the widget stateful for animations.

    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // Assuming constraints here. 
        // Play with width and height values 
        const double widgetWidth = 100;
        const double widgetHeight = 60;
        // To get a semicircle
         const double bottomRadius = widgetWidth / 2;
        //Since we have 5 colors . Each color bars height is 60/5 = 12
        const double colorBarHeight = widgetHeight / 5;
    
    return ClipRRect(
        borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(bottomRadius),
            bottomRight: Radius.circular(bottomRadius)),
        child: SizedBox(
            width: widgetWidth,
            height: widgetHeight,
            child: Column(
              children: [
              Container(
                  width: widgetWidth,height: colorBarHeight,color: Colors.green),
              Container(
                  width: widgetWidth,height: colorBarHeight,color: Colors.orange),
              Container(
                  width: widgetWidth,height: colorBarHeight,color: Colors.yellow),
              Container(
                  width: widgetWidth, height: colorBarHeight, color: Colors.red),
              Container(
                  width: widgetWidth, height: colorBarHeight, color: Colors.blue),
            ])));
    

    } }