面临的问题，在使这个在翩翩

Question

我目前的代码:

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),
                  ),
                )

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

Answer 1

你可以使用 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;
  }
}

输出

Answer 2

你可以试试 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;
  }
}