如何在颤动中创建以下形状？答案

【问题标题】：How to create the following shape in flutter?如何在颤动中创建以下形状？
【发布时间】：2021-11-27 05:31:45
【问题描述】：

我想在颤动中创建上述形状。我正在使用 clipPath 来获得正确的边，但我无法获得圆角。

【问题讨论】：

【解决方案1】：

您必须使用来自here 的flutter_custom_clippers 包。在您的 pubspec.yaml 文件中添加此依赖项

试试下面的代码希望对你有帮助

在您的文件中导入包

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

您的小部件：

 ClipPath(
            clipper: RoundedDiagonalPathClipper(),
            child: Container(
              height: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(
                    50.0,
                  ),
                ),
                color: Colors.grey[300],
              ),
              child: Center(
                child: Text("Your Shape"),
              ),
            ),
          ),

您的结果屏幕->

【讨论】：

没有库使用剪贴路径小部件
欣赏答案，但我希望在没有任何第三方软件包的情况下这样做，以便更好地控制我如何根据不同的设计制作我的形状。

【解决方案2】：

您可以通过CustomClipper 做到这一点


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded corner'),
      ),
      body: Container(
        decoration: BoxDecoration(
            color: Color(0xff240046), borderRadius: BorderRadius.circular(15)),
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
        margin: EdgeInsets.symmetric(vertical: 8),
        child: ClipPath(
          clipper: CustomRectClipper(),
          child: Container(
            height: 500,
            width: 300,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(50.0)),
              color: Colors.grey,
            ),
            child: Center(child: Text("RoundedDiagonalPathClipper()")),
          ),
        ),
      ),
    );
  }
}

class CustomRectClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path()
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0.0)
      ..quadraticBezierTo(size.width-50, 0.0, size.width - 60.0, -5.0)
      ..lineTo(40.0, 150.0) // here you adjust the value as much as you nee
      ..quadraticBezierTo(0.0, 180.0, 0.0, 220.0);
    return path;
  }

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

输出：

【讨论】：

这里的边角看起来不光滑
@sumitkumarPradhan 更新了我的答案，您从 custompath 调整值以调整值
这是更好的答案。正如另一个答案所暗示的那样，无需为如此简单的任务使用 pub 库。光滑与否，总是可以进一步细化和抛光。