Flutter : Need help to implement card with image - flutter

Question

I need to implement a design similar to the image displayed below:

Answer 1

Here is a possible solution with a CustomPainter and a Path to generate the drawing. I used the cubicTo and a addRect functions of the Path class. For more information about these functions and path drawing, I refer to this: Paths in Flutter: A Visual Guide
This is the class which extends the CustomPainter
class CardPainter extends CustomPainter {
final Color color;
final double strokeWidth;
CardPainter({this.color = Colors.black, this.strokeWidth = 3});
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = color
..strokeWidth = this.strokeWidth
..style = PaintingStyle.stroke;
canvas.drawPath(getShapePath(size.width, size.height), paint);
}
// This is the path of the shape we want to draw
Path getShapePath(double x, double y) {
return Path()
..moveTo(2 * x / 3, y)
..cubicTo(x / 1.5, y, 0, y / 3, x, 0) // draw cubic curve
..addRect(Rect.fromLTRB(0, 0, x, y)); // draw rectangle
}
#override
bool shouldRepaint(CardPainter oldDelegate) {
return oldDelegate.color != color;
}
}
Here is the implementation of the CustomPainter
class CustomCard extends StatelessWidget {
CustomCard({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Custom Card Demo')),
body: Center(
child: Container(
color: Colors.grey[300],
width: 250,
height: 120,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: CustomPaint(
painter: CardPainter(color: Colors.blueAccent, strokeWidth: 3), // this is your custom painter
child: Stack(
children: <Widget>[
Positioned(
top: 25,
left: 30,
child: Text('Text1'),
),
Positioned(
top: 55,
left: 150,
child: Text('Text2'),
),
],
),
),
),
),
);
}
}