是否可以在 FLUTTER 中创建此 UI？

Question

我想在 Flutter 中为我的应用程序制作这样的容器，是否可以在不使用任何包的情况下通过对 boxdecoration 进行一些调整来实现？这个视图的侧面应该是这样的，就像从书上撕下来的纸一样。

Answer 1

你可以使用这个库：https://pub.dev/packages/coupon_uikit

如果您想创建自己的小部件，您必须搜索 CustomClippers。例如你可以看看这段代码：

https://github.com/lohanidamodar/flutter_custom_clippers/blob/master/lib/src/movie_ticket_both_side_clipper.dart

Answer 2

为此我们可以使用 CustomClipper。

class CuponClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    final radius = size.height * .065;

    Path holePath = Path();

    for (int i = 1; i <= 4; i++) {
      holePath.addOval(
        Rect.fromCircle(
          center: Offset(0, (size.height * .2) * i),
          radius: radius,
        ),
      );
    }
    for (int i = 1; i <= 4; i++) {
      holePath.addOval(
        Rect.fromCircle(
          center: Offset(size.width, (size.height * .2) * i),
          radius: radius,
        ),
      );
    }

    return Path.combine(PathOperation.difference, path, holePath);
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

并使用

body: Center(
  child: ClipPath(
    clipper: CuponClipper(),
    child: Container(
      height: 100,
      width: 400,
      alignment: Alignment.center,
      color: Colors.amber,
      child: Text("sdsdsd"),
    ),
  ),
),

是否可以在 FLUTTER 中创建此 UI？

is it Posible Create This UI in FLUTTER?

flutter

dart

flutter-layout

flutter-dependencies