I was wondering If someone could help me design something like this using Flutter :

So far, I've tried creating two containers on top of each other but I do not know how to make that semi circle in the middle of the card.

Also, It would be great If we could cut this image into two equal halves and write code for both of them separately. The reason being, I need to put data into the two halves and I want the height to be dynamic (not fixed).

I want to create this using the best design approach. Any help would be really appreciated.

CodePudding user response：

Use CustomPaint, read more here, and fluttershapemaker can help you do it easily by drawing it or converting this SVG to CustomPaint code.

CodePudding user response：

There is a couple of ways you can do that

1. Instead of making a circe container you can use a normal rectangle container and give topRight and bottomRight high borderRadius on the left side and on the right side you would give the container high border radius on topLeft and bottomLeft. the code will look something like

Container(height:MediaQuery.of(context).size.height,aligment:Alignment.center, child:Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(100),
            bottomRight: Radius.circular(100),
          ),
        ),
      ),
      Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(100),
            bottomLeft: Radius.circular(100),
          ),
        ),
      )
    ]),),

2. If you want to stick with creating a circle you can add to circles on a stack and position them on a negative value of left and right. resulting in cutting the circle how ever you want.

I hope this helps