Flutter Custom Painter Design

Question

ive been trying to design this with custom painter or custom clipper, especially the curved bottom, can anyone help me?

Answer 1

I did something similar but with 3 zones. This widget works, you can personalize like you want:

  Widget _getColumnColor(
      {Color color1,
      Color color2,
      Color color3,
      double radius,
      Widget content1,
      Widget content2,
      Widget content3}) {
    return Column(
      children: [
        Expanded(
            flex: 2,
            child: Stack(
              children: [
                Container(
                  color: color2,
                ),
                Container(
                  height: double.infinity,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: color1,
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(radius),
                    ),
                  ),
                  child: content1,
                ),
              ],
            )),
        Expanded(
            flex: 1,
            child: Stack(
              children: [
                Row(
                  children: [
                    Expanded(
                        child: Container(
                      color: color1,
                    )),
                    Expanded(child: Container(color: color3))
                  ],
                ),
                Container(
                  decoration: BoxDecoration(
                    color: color2,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(radius),
                      bottomRight: Radius.circular(radius),
                    ),
                  ),
                  width: double.infinity,
                  height: double.infinity,
                  child: content2,
                ),
              ],
            )),
        Expanded(
            flex: 1,
            child: Stack(
              children: [
                Row(
                  children: [
                    Expanded(
                        child: Container(
                      color: color2,
                    )),
                    Expanded(child: Container(color: color3))
                  ],
                ),
                Container(
                  decoration: BoxDecoration(
                    color: color3,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(radius),
                      bottomRight: Radius.circular(radius),
                    ),
                  ),
                  width: double.infinity,
                  height: double.infinity,
                  child: content3,
                ),
              ],
            )),
      ],
    );
  }

Color1, color2 and color3 are zones colors, radius is the radius of corners and content1, content2 and content3 are the contents inside of three zones.

Answer 2

If you want to design your own shape you can use https://fluttershapemaker.com/