如何在Flutter中设计这样的布局背景？

Question

我正在寻找一种看起来像波浪形涂料的设计。我不想使用任何图像。我想通过编程来做到这一点。

我阅读了很多文章和其他答案，但没有一个满足我的要求。

我必须在抖动中实现这种背景设计。

Answer 1

我们可以使用Clippath插件来实现这种设计。

步骤1：首先创建一个名为 my_clipper.dart 的新dart文件，然后将以下代码粘贴到 my_clipper.dart 文件中：

    import 'package:flutter/material.dart';

    class MyClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
        path.lineTo(0, 220);
        path.quadraticBezierTo(
            size.width / 4, 160 /*180*/, size.width / 2, 175);
        path.quadraticBezierTo(
            3 / 4 * size.width, 190, size.width, 130);
        path.lineTo(size.width, 0);
        path.close();
        return path;
      }

      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }

步骤2：现在在您的脚手架或任何其他小部件中，使用MyCLipper类，如下所示：

     home: Scaffold(
        backgroundColor: Colors.indigo,
        body: Stack(
          children: [
            ClipPath(
              clipper: MyClipper(),
              child: Container(
                color: Colors.white,
              )
            )
          ],
        ),
      )