Custom curved card shape Flutter

Question

I have tried creating this shape, but I can't find a way to curve the card corners. Here is what I want to achieve What I want to achieve

Instead, I get this shape: What I have achieved

Here's my sample code:

    Container(
      child: Center(
        child: CustomPaint(
          painter: Chevron(),
          child: Container(
            width: 120.0,
            height: 140.0,
            child: Padding(
              padding: EdgeInsets.only(top: 30.0),
              child: Align(
                alignment: Alignment.topCenter,
                child: Text("1", style: TextStyle(fontSize: 24.0)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
class Chevron extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Gradient gradient = new LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.orangeAccent, Colors.yellow],
      tileMode: TileMode.clamp,
    );

    final Rect colorBounds = Rect.fromLTRB(0, 0, size.width, size.height);
    final Paint paint = new Paint()
      ..shader = gradient.createShader(colorBounds);

    Path path = Path();



    path.moveTo(0, 30);
    path.lineTo(0, size.height);
    //path.lineTo(size.width / 2, size.height - size.height / 3);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Any idea on how to go about this? Thank you

user_13997210 · Answer

You must use for this shape flutter_custom_clippers package from here. Add this dependency in your pubspec.yaml file , you can refer my answer here also

Try below code hope its help to you

Import package in your file

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

Your Widget:

 ClipPath(
            clipper: RoundedDiagonalPathClipper(),
            child: Container(
              height: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(
                    50.0,
                  ),
                ),
                color: Colors.grey[300],
              ),
              child: Center(
                child: Text("Your Shape"),//put your widget here
              ),
            ),
          ),

Your result screen->

Custom curved card shape Flutter

1 Answers