I would like to create this in Flutter:

I know you can create a half circle like

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),
        ])));

} }

CodePudding user response：

Please try this below code:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(300),
                bottomRight: Radius.circular(300),
              ),
              child: Container(
                alignment: Alignment.center,
                height: 100,
                width: 200,
                child: Column(
                  children: [
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

You will get an output like below: