如何用這條曲線制作背景？

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來剪輯已經定義了線性漸變的容器。 剪裁器的構建試圖與您顯示的圖像盡可能匹配（因為我不熟悉 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;
  }
}

Answer 2

我使用 CustomClipper 和 PysicalShape 創建了相同的背景。 這是代碼：

import 'package:flutter/material.dart';

class MainWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
            padding: EdgeInsets.all(10),
            child: PhysicalShape(
              clipBehavior: Clip.antiAlias,
              clipper: RoundCornerClipper(),
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomRight,
                    end: Alignment.topLeft,
                    colors: [
                      const Color(0xFFFA709A),
                      const Color(0xFFFEC140),
                    ],
                  ),
                ),
                width: 200,
                height: 200,
              ),
              color: Colors.transparent,
              elevation: 2,
              shadowColor: Colors.grey,
            )),
      ),
    );
  }
}

class RoundCornerClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double radius = 30;

    Path path = Path()
      ..moveTo(size.width, 0)
      ..lineTo(size.width, size.height - radius)
      ..quadraticBezierTo(
          size.width, size.height, size.width - radius, size.height)
      ..lineTo(radius, size.height)
      ..quadraticBezierTo(0, size.height, 0, size.height - radius)
      ..lineTo(0, radius * 2)
      ..arcToPoint(
        Offset(radius, radius),
        radius: Radius.circular(radius),
      )
      ..lineTo(size.width - radius, radius)
      ..arcToPoint(Offset(size.width, 0),
          radius: Radius.circular(radius), clockwise: false)
      ..close();

    return path;
  }

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