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

Posted 2023-02-23

【中文标题】如何在颤动中创建以下形状？

【英文标题】：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 库。光滑与否，总是可以进一步细化和抛光。