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

Question

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

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

我必须在flutter中实现这样的背景设计。

Answer 1

Clippath我们可以使用flutter中的widget来实现这样的设计。

步骤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,
              )
            )
          ],
        ),
      )