在扑朔迷离中面临的问题

enter image description here

我当前的代码:

Container(
                  height: 1 / 3 * deviceSize.height,
                  width: double.infinity,
                  child: Text(
                    'Add New Location',
                    style: TextStyle(color: Colors.black, fontSize: 20.0),
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.elliptical(300, 100),
                        bottomRight: Radius.elliptical(300, 100)),
                    color: Color(0xFFFAD02E),
                  ),
                )

我没有得到想要的结果....:/

评论
  • 小、白痴
    小、白痴 回复

    您可以使用自定义裁剪器尝试ClipPath,以使所需的UI更加流畅。但是您的方法仍然可以工作,需要进行一些调整。

    ClipPath(
      clipper: ProfileClipper(),
      child: Image(
        height: 300.0,
        width: double.infinity,
        image: AssetImage('You can use image or your desire color use container'),
        fit: BoxFit.cover,
      ),
    ),
    import 'package:flutter/material.dart';
    
    class ProfileClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        Path path = Path();
        path.lineTo(0, 4 * size.height / 5);
        Offset curvePoint = Offset(size.width / 2, size.height);
        Offset endPoint = Offset(size.width, 4 * size.height / 5);
        path.quadraticBezierTo(
          curvePoint.dx,
          curvePoint.dy,
          endPoint.dx,
          endPoint.dy,
        );
        path.lineTo(size.width, 0);
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }
  • Laura
    Laura 回复

    You can use ClipPath

    尝试这个

    ClipPath(
      clipper: BottomClipper(),
      child: Container(
      height: 200,
      color: Colors.yellow,
      child: Center(child: Text("BottomClipper()")),
     ),
    ),
    
    BottomClipper()
    import 'package:flutter/material.dart';
    
    class BottomClipper  extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
        path.lineTo(0, 0);
        path.lineTo(0, size.height - 40);
        path.quadraticBezierTo(
            size.width / 4, size.height, size.width / 2, size.height);
        path.quadraticBezierTo(
            size.width - size.width / 4, size.height, size.width, size.height - 40);
        path.lineTo(size.width, 0);
        path.lineTo(0, 0);
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return true;
      }
    }
    

    输出值

    enter image description here