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

Question

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

我看了很多文章和其他答案，但没有一个符合我的要求。

我要在flutter中实现这样的背景设计

Answer 1

我们可以在 flutter 中使用 Clippath 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 Class，如下所示：

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

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

How could I Design a layout background like this in Flutter?

flutter

flutter-layout

flutter-animation