How to make Custom shape Container in Flutter?

Question

I have to make container which bottom is triangular shape as below image.

How to create this shape in flutter?

Answer 1

Use this in widget tree

CustomPaint(
        size: Size(MediaQuery.of(context).size.width, 300),
        painter: CustomShapePainter(),
      ),

Create the customShapePainter class

class CustomShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 15;

    var path = Path();
path.moveTo(0,0);
path.lineTo(size.width, 0);

path.lineTo(size.width, size.height*0.8);
path.lineTo(size.width*0.5, size.height);
path.lineTo(0, size.height*0.8);
path.lineTo(0, 0);

canvas.drawPath(path, paint);
 }

   @override
  bool shouldRepaint(CustomShapePainter oldDelegate) {
    return false;
  }
}

Answer 2

you can use this package and after adding this package add this code wrap 2 containers

class MyCustomTriangleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width / 2, size.height * .2/*change this number to edit the triangle sahpe as you want and add more one Square*/);
path.lineTo(size.width, 0);

path.close();
return path;
}

@override
bool shouldReclip(CustomClipper old) {
return old != this;
 }
}

and use this Widget

ClipPath(
                clipper: MyCustomTriangleClipper (),
                child: Container(
                  height: 120,
                  // width: double.infinity,
                  color: Colors.black,
                ),
              ),