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

score 2 · Accepted Answer · answered Dec 14 '22 at 19:36

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'),
                ),
              ),
            ),
          ),
        ],
      );
    }),
  )

I'm in shock))) everything turned out, thank you very much) But it's very interesting, but how did you manage to draw all the CustomClipper? You don't even have the origins shapes)) Thanks you again — Patrick, Dec 14 '22 at 19:51
glad to help. just get the logic of clip then you can draw everything. — eamirho3ein, Dec 14 '22 at 19:52

Insert an image into a complex shape (Flutter)

1 Answers1