如何在颤振中在容器中创建曲线

Question

如何在这样的容器中创建曲线

Answer 1

这张图中的 Appbar 实际上是圆形的。为了达到这个目的：

AppBar(
    title: Text('Anything'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
  ),

如果你想要这种形状的容器：

Container(
    height: 200.0,
    decoration: new BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.vertical(
          bottom: Radius.elliptical(
              MediaQuery.of(context).size.width, 100.0)),
    ),
  ),

Answer 2

如果您需要为个人资料图片所在的容器创建曲线，最好的办法是使用带有自定义剪裁器的ClipPath。

像这样的事情可以解决问题：

ClipPath(
  clipper: CurveClipper(),
  child: Container(
    color: Colors.red,
    height: 200.0,
  ),
);

我们的习惯CurveClipper要求我们绘制一条包含贝塞尔曲线的路径，以在容器底部获得该曲线形状：

class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    int curveHeight = 40;
    Offset controlPoint = Offset(size.width / 2, size.height + curveHeight);
    Offset endPoint = Offset(size.width, size.height - curveHeight);

    Path path = Path()
      ..lineTo(0, size.height - curveHeight)
      ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
      ..lineTo(size.width, 0)
      ..close();

    return path;
  }

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