Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Folded card effect - Flutter

I want to make an effect as shown below, I have added a Card and a Container in a Stack to show the upper badge. But I am not sure what or which widget to use for that upper left corner of the badge.

enter image description here

Can anyone guide me on how to achieve that effect.

My current state: enter image description here

like image 696
Aawaz Gyawali Avatar asked Dec 05 '25 23:12

Aawaz Gyawali


1 Answers

use a CustomPaint for the triangle part and composite with your text in a Row

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 2.0;
    Path path = Path();
    path.moveTo(0.0, size.height);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

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

and in your Row

Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           SizedBox(
             height: 8.0,
             width: 5.0,
             child: CustomPaint(
               painter: TrianglePainter(),
             ),
           ),
           Container(
             decoration: BoxDecoration(
                 color: Colors.red,
                 borderRadius: BorderRadius.only(
                     topRight: Radius.circular(6.0),
                     bottomLeft: Radius.circular(6.0))),
             width: 120.0,
             height: 30.0,
             child: Center(
               child: Text(
                 'Customer Replay',
                style: TextStyle(color: Colors.white),
               ),
             ),
           ),
         ],
        ),

enter image description here

like image 85
Raouf Rahiche Avatar answered Dec 08 '25 15:12

Raouf Rahiche



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!