flutterflutter-layoutflutter-custompainterflutter-custompaint

How to make Custom shape Container in Flutter?


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

How to create this shape in flutter?


Solution

  • 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;
      }
    }