时间戳

首页 > 解决方案 > 如何以中心向外的弧形夹住容器的底部

flutter - 如何以中心向外的弧形夹住容器的底部

问题描述

我想夹住容器的底部，如图所示

我已经对圆圈进行了编码，但是如何实现剩余部分

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 90);

    var firstControlPoint = Offset(size.width / 5, size.height);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width - (size.width / 5), size.height);
    var secondPoint = Offset(size.width, size.height - 90);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

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

标签： flutterflutter-layout

解决方案

Stack(
    alignment: Alignment.bottomCenter,
    children: [
      Container(
        margin: EdgeInsets.only(bottom: 24),
        padding: EdgeInsets.symmetric(vertical: 4),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(15),
            bottomLeft: Radius.circular(15),
          ),
          border: Border.all(
            color: Colors.grey.withOpacity(0.5),
          ),
        ),
        child: Container(height: 100),
      ),
      Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
            shape: BoxShape.circle, color: Colors.white),
        child: CircleAvatar(
            radius: 24,
            backgroundColor: Colors.green,
            child: Icon(
              Icons.arrow_forward,
              color: Colors.white,
            )),
      ),
    ],
  )

推荐阅读