skip to Main Content

enter image description here

how to implement this overlay with flutter? notice the triangle shape in the position of the button.

2

Answers


  1. Chosen as BEST ANSWER

    i used stack with render box offset. with two children inside stack on child for traingle shape and one for big white box.


  2. I belive you can use the paint widget for the same and later using the positioned widget you can place it on top of any container .

    below is the example code to us the paint widget

     class TriangleBox extends CustomPainter {
        final Color strokeColor;
        final PaintingStyle paintingStyle;
        final double strokeWidth;
    
        TrianglePainter({
         required this.strokeColor,
         required this.paintingStyle,
         required this.strokeWidth,
        });
    
        @override
        void paint(Canvas canvas, Size size) {
        final Paint paint = Paint()
          ..color = strokeColor
          ..style = paintingStyle
          ..strokeWidth = strokeWidth;
    
        final Path path = Path();
        path.moveTo(size.width / 2, 0);
        path.lineTo(0, size.height);
        path.lineTo(size.width, size.height);
        path.close();
    
         canvas.drawPath(path, paint);
         }
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search