如何在颤动中创建不使用边界半径的曲线控件

Question

我是flutter开发的初学者。我正在尝试使用边框半径组件创建一个弯曲的小部件，但是我不能创建一个精确的样机屏幕。请指导我如何绘制弯曲的小工具。在这里我附上了我的样机样本。

提前谢谢。

​

​

Answer 1

下面是一个如何使用CustomClipper实现该功能的示例

class ClippingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ClipPath(
        clipper: CurvedBottomClipper(),
        child: Container(
          color: Colors.lightGreen,
          height: 250.0,
          child: Center(
              child: Padding(
            padding: EdgeInsets.only(bottom: 50),
            child: Text(
              "Curved View",
              style: TextStyle(
                fontSize: 25,
                color: Colors.white,
              ),
            ),
          )),
        ),
      ),
    );
  }
}

class CurvedBottomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // I've taken approximate height of curved part of view
    // Change it if you have exact spec for it
    final roundingHeight = size.height * 3 / 5;

    // this is top part of path, rectangle without any rounding
    final filledRectangle =
        Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight);

    // this is rectangle that will be used to draw arc
    // arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight
    // also I made it to go 5 units out of screen on left and right, so curve will have some incline there
    final roundingRectangle = Rect.fromLTRB(
        -5, size.height - roundingHeight * 2, size.width + 5, size.height);

    final path = Path();
    path.addRect(filledRectangle);

    // so as I wrote before: arc is drawn from center of roundingRectangle
    // 2nd and 3rd arguments are angles from center to arc start and end points
    // 4th argument is set to true to move path to rectangle center, so we don't have to move it manually
    path.arcTo(roundingRectangle, pi, -pi, true);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // returning fixed 'true' value here for simplicity, it's not the part of actual question, please read docs if you want to dig into it
    // basically that means that clipping will be redrawn on any changes
    return true;
  }
}

这就是你将通过这段代码得到的结果：

​

Answer 2

您可以使用圆形容器，您可以尝试如何在屏幕上定位它

Container(
  width: double.infinity,
  height: 500,
  decoration: new BoxDecoration(
    color: Colors.green,
    shape: BoxShape.circle,
  ),
  child: Text('Curved View'),
  alignment: Alignment.center,
)