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