Insert an image into a complex shape (Flutter)

Question

What is the best tool to use here? In my application, I will have to create banners, the data of which I will receive from the server. The data is text and an image. The difficulty is that I need to somehow make this picture such a complex shape. And so far I have not found a suitable tool to do this. I have a layout in Figma, where this form is in the vector, but I still don’t understand how to transfer it to the application and fill the picture with it. Yes, and in addition to the picture itself, there is such a form and a container where the text is (the left part is clear how to do it, with the help of Border.only(...), but I don’t understand the left part either) Thanks

Answer 1

You can use CustomClipper like this:

class CustomDraw2 extends CustomClipper<Path> {
  final double radius;
  CustomDraw2(this.radius);
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.cubicTo(size.width - radius * 0.2, 0, size.width - radius,
        (3 * size.height / 5), size.width - radius, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

class CustomDraw3 extends CustomClipper<Path> {
  final double radius;
  CustomDraw3(this.radius);
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(radius, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(radius / 2.5, size.height);
    path.cubicTo(radius / 2.5, size.height, -radius / 2.5,
        (3 * size.height / 5), radius, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

and use these CustomClipper like this:

Container(
    clipBehavior: Clip.antiAlias,
    decoration:
        BoxDecoration(borderRadius: BorderRadius.circular(16)),
    width: double.infinity,
    height: 100,
    child: LayoutBuilder(builder: (context, constraints) {
      double imageWidth = constraints.maxWidth * 0.3;
      var radius = imageWidth * 0.25;
      return Stack(
        children: [
          Positioned(
            right: 0,
            top: 0,
            bottom: 0,
            child: ClipPath(
              clipBehavior: Clip.antiAlias,
              clipper: CustomDraw3(radius),
              child: Image.asset(
                'assets/images/test.jpeg',
                fit: BoxFit.cover,
                width: imageWidth,
                height: 100,
              ),
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            bottom: 0,
            child: Container(
              clipBehavior: Clip.none,
              height: 100,
              width: constraints.maxWidth * 0.76,
              child: ClipPath(
                clipBehavior: Clip.antiAlias,
                clipper: CustomDraw2(radius),
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                  color: Colors.white,
                  alignment: Alignment.centerLeft,
                  child: Text('some text'),
                ),
              ),
            ),
          ),
        ],
      );
    }),
  )