将图像插入复杂形状（Flutter）

Question

这里使用的最佳工具是什么？在我的应用程序中，我必须创建横幅，我将从服务器接收横幅数据。数据是文本和图像。困难在于我需要以某种方式使这张图片变得如此复杂的形状。到目前为止我还没有找到合适的工具来做到这一点。我在 Figma 中有一个布局，该表单位于矢量中，但我仍然不明白如何将其传输到应用程序并用它填充图片。是的，除了图片本身之外，还有这样一个表单和一个文本所在的容器（左边部分在 Border.only(...) 的帮助下很清楚如何做到这一点，但我不知道也不明白左边的部分） 谢谢

Answer 1

您可以像这样使用

CustomClipper

：

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;
  }
}

并像这样使用这些

CustomClipper

：

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