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

Question

I want make Container like this in Flutter for my Application, is is posbile through some tweaks in boxdecoration without using any packages? The sides of this view should be like that, something like a paper torn from a book.

Answer 1

We can use CustomClipper for this.

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

And use

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

Answer 2

You can use this library: https://pub.dev/packages/coupon_uikit

If you want to create own widget you must search CustomClippers . For example you can take a look this code:

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