Флаттер: нужна помощь для реализации карты с изображением

Question

Мне нужно реализовать дизайн, подобный изображенному ниже:

Answer 1

Вот возможное решение с CustomPainter и путем для создания чертежа. Я использовал функции cubicTo и addRect класса Path. Для получения дополнительной информации об этих функциях и рисовании путей, я обращаюсь к этому: Пути в Флаттере: Визуальное руководство

Это класс, который расширяет 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;
  }
}

Вот реализация 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'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}