如何用这条曲线制作背景？

Question

我收到了一个模型，在某些屏幕上，背景有这条曲线，但对于如何使用小部件进行此操作并不容易。任何人都可以给我建议吗？

Tenho o css da parte colorida、com o gradiente da cor ea sombra、mas não sei como fazer essas curvas、porque não é só por a borda 30px。

background: linear-gradient(320.82deg, #FA709A 0%, #FEC140 100%);
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.21);

更新

我把我认为是最大缺陷的彩色部分的 svg

<svg width="375" height="563" viewBox="0 0 375 563" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i)">
<path d="M0 59.4317C0 42.8632 13.4315 29.4317 30 29.4317H342H345.568C361.823 29.4317 375 16.2547 375 0V281.5V548C375 556.284 368.284 563 360 563H15C6.71574 563 0 556.284 0 548V59.4317Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_i" x="0" y="0" width="375" height="567" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<linearGradient id="paint0_linear" x1="375" y1="563" x2="-37.9549" y2="29.3719" gradientUnits="userSpaceOnUse">
<stop stop-color="#FA709A"/>
<stop offset="1" stop-color="#FEC140"/>
</linearGradient>
</defs>
</svg>

Answer 1

检查下面的这个代码，或者这个DartPad。

这个想法是使用ClipPath和CustomClipper来剪辑已经定义了线性渐变的 Container。剪刀的构建试图与您显示的图像尽可能匹配（因为我不熟悉 svg）。否则，您可以查看flutter_svg可能会达到相同的结果。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(child: Container()),
          Expanded(
            child: ClipPath(
              clipper: MyCustomClipper(),
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomRight,
                    end: Alignment.topLeft,
                    colors: [
                      const Color(0xFFFA709A),
                      const Color(0xFFFEC140),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..moveTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, 60)
      ..arcToPoint(
        Offset(30, 30),
        radius: Radius.circular(30),
      )
      ..lineTo(size.width - 30, 30)
      ..arcToPoint(Offset(size.width, 0),
          radius: Radius.circular(30), clockwise: false);
    return path;
  }

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