Flutter 制作 CustomClipper 的可调整大小的部分

Question

在我的朋友@kherel 为我实现的这段代码中，我想为这个屏幕截图的黑色部分设置自定义大小：

由于我对 Flutter 中的此功能没有任何经验，我不知道如何解决，我在这张图片中有 3 个黑色部分，我想为它们设置自定义大小

class ProductClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final factorW = size.width / 100;
    final factorH = size.height / 100;
    return Path()
      ..moveTo(0.0 * factorH, 0.0 * factorW)
      ..lineTo(100.0 * factorH, 0.0 * factorW)
      ..lineTo(100.0 * factorH, 72.6 * factorW)
      ..cubicTo(90.4 * factorH, 72.6 * factorW, 81.0 * factorH, 72.6 * factorW,
          72.1 * factorH, 72.6 * factorW)
      ..cubicTo(64.8 * factorH, 72.6 * factorW, 62.3 * factorH, 75.2 * factorW,
          62.3 * factorH, 88.3 * factorW)
      ..cubicTo(62.3 * factorH, 97.3 * factorW, 61.9 * factorH, 100.0 * factorW,
          57.2 * factorH, 100.0 * factorW)
      ..cubicTo(42.8 * factorH, 100.0 * factorW, 23.7 * factorH,
          100.0 * factorW, 0.0 * factorH, 100.0 * factorW)
      ..lineTo(0.0 * factorH, 0.0 * factorW)
      ..close();
  }

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

ClipPath(
  clipper: ProductClipper(),
  child: Container(
    width: 200,  //can be resizable
    height: 200, //can be resizable
    color: Colors.pink,
  ),
),

class Clipper1 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var factorW = size.width / 100;
    var factorH = size.height / 100;
    return Path()
      ..moveTo(0.0 * factorW, 0.0 * factorH)
      ..cubicTo(2.0 * factorW, -1.0 * factorH, 3.0 * factorW, -1.0 * factorH,
          3.0 * factorW, 0.0 * factorH)
      ..cubicTo(15.0 * factorW, 1.0 * factorH, 17.0 * factorW, 19.0 * factorH,
          20.0 * factorW, 43.0 * factorH)
      ..cubicTo(23.0 * factorW, 66.0 * factorH, 33.0 * factorW, 71.0 * factorH,
          35.0 * factorW, 71.0 * factorH)
      ..cubicTo(50.0 * factorW, 71.0 * factorH, 72.0 * factorW, 71.0 * factorH,
          100.0 * factorW, 71.0 * factorH)
      ..lineTo(100.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 0.0 * factorH)
      ..close();
  }

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

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          ClipPath(
            clipper: Clipper1(
              sizeA: 40,
            ),
            child: Container(
              width: 150, //you can change this size
              height: 100, //you can change this size
              color: Colors.blue,
            ),
          ),
          ClipPath(
            clipper: Clipper2(
              sizeA: 10,
            ),
            child: Container(
              width: 180,
              height: 200,
              color: Colors.pink,
            ),
          ),
        ],
      ),
    );
  }
}

class Clipper1 extends CustomClipper<Path> {
  Clipper1({this.sizeA});

  double sizeA;
  @override
  Path getClip(Size size) {
    var factorW = size.width / 100;
    var factorH = size.height / 100;
    return Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(sizeA, 0.0)
      ..cubicTo(
        sizeA,
        0,
        3.0 * factorW,
        0,
        sizeA + 3.0 * factorW,
        0,
      )
      ..cubicTo(
        sizeA + 15.0 * factorW,
        1.0 * factorH,
        sizeA + 17.0 * factorW,
        19.0 * factorH,
        sizeA + 20.0 * factorW,
        43.0 * factorH,
      )
      ..cubicTo(
        sizeA + 23.0 * factorW,
        66.0 * factorH,
        sizeA + 33.0 * factorW,
        71.0 * factorH,
        sizeA + 35.0 * factorW,
        71.0 * factorH,
      )
      ..cubicTo(50.0 * factorW, 71.0 * factorH, 72.0 * factorW, 71.0 * factorH,
          100.0 * factorW, 71.0 * factorH)
      ..lineTo(100.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 0.0 * factorH)
      ..close();
  }

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

class Clipper2 extends CustomClipper<Path> {
  Clipper2({this.sizeA});

  double sizeA;
  @override
  Path getClip(Size size) {
    var factorW = size.width / 100;
    var factorH = size.height / 100;
    return Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(
        100.0 * factorW,
        0.0,
      )
      ..lineTo(
        100.0 * factorW,
        72.6 * factorH,
      )
      ..cubicTo(
        sizeA + 66.7 * factorW,
        72.6 * factorH,
        sizeA + 57.3 * factorW,
        72.6 * factorH,
        sizeA + 48.4 * factorW,
        72.6 * factorH,
      )
      ..cubicTo(
        sizeA + 41.1 * factorW,
        72.6 * factorH,
        sizeA + 38.6 * factorW,
        75.2 * factorH,
        sizeA + 38.6 * factorW,
        88.3 * factorH,
      )
      ..cubicTo(
        sizeA + 38.6 * factorW,
        97.3 * factorH,
        sizeA + 38.2 * factorW,
        100.0 * factorH,
        sizeA + 33.5 * factorW,
        100.0 * factorH,
      )
      ..cubicTo(
        sizeA + 19 * factorW,
        100.0 * factorH,
        sizeA * factorW,
        100.0 * factorH,
        0.0,
        100.0 * factorH,
      )
      ..lineTo(0.0, 0.0)
      ..close();
  }

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