flutter - 如何在 Flutter 的屏幕顶部创建一个半椭圆？

Question

有没有办法在屏幕顶部创建一个椭圆形？我尝试使用 RenderBox，但感觉这不是一个正确的解决方案。

Answer 1

使用 CustomPainter 并使用曲线:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CustomPaint(
              painter: ShapesPainter(),
              child: Container(height: 300),
            ),
            Text('Text')
          ],
        ),
      ),
    );
  }
}

const double _kCurveHeight = 35;

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final p = Path();
    p.lineTo(0, size.height - _kCurveHeight);
    p.relativeQuadraticBezierTo(size.width / 2, 2 * _kCurveHeight, size.width, 0);
    p.lineTo(size.width, 0);
    p.close();

    canvas.drawPath(p, Paint()..color = Colors.red);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}