Flutter UI中添加双曲线的更优实现方案咨询

我是Flutter完全新手，需要实现如图所示的双曲线UI效果。目前尝试了在Stack组件内嵌套Positioned和ClipOval组件的方式（未完成），请问该方案是否正确，或者有没有更优的实现方法？

我目前的尝试代码： #

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

final backgroundColor = const Color(0xFFAFEDB3);
final ellipse1 = const Color(0xB2F1FFEC);
final ellipse2 = const Color(0xff9FE3A4);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login screen'),
      ),
      body: Container(
        decoration:  BoxDecoration(
          color: backgroundColor,
        ),
        child: Stack(
          children: [
            Positioned(
              top: -90,
              left: -75,
              height: 320,
              width: 450,
              child: ClipOval(
                child: Container(
                  width: double.maxFinite,
                  height: 200,
                  color: ellipse1,
                  child: const Text(
                    'Green',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
            Positioned(
              top: -10,
              right: -25,
              height: 200,
              width: 200,
              child: ClipOval(
                child: Container(
                  width: double.maxFinite,
                  height: 200,
                  color: ellipse2,
                  child: const Text(
                    'Green',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方案评估与优化建议 #

1. 现有方案完全可行

Stack+Positioned+ClipOval的思路逻辑清晰，新手容易理解和调整，通过修改Positioned的位置参数（top/left/right/bottom）和宽高，就能匹配设计图中的椭圆形态。

当前代码的小问题：

• ClipOval内层Container无需设置width: double.maxFinite，外层Positioned已指定宽高，直接移除该属性即可，避免椭圆显示变形。
• 测试用的Text组件可以删除，不影响背景效果。

优化后的Stack版本代码：

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  final backgroundColor = const Color(0xFFAFEDB3);
  final ellipse1 = const Color(0xB2F1FFEC);
  final ellipse2 = const Color(0xff9FE3A4);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login screen')),
      body: Container(
        color: backgroundColor,
        child: Stack(
          children: [
            // 左侧大椭圆
            Positioned(
              top: -90,
              left: -75,
              width: 450,
              height: 320,
              child: ClipOval(child: Container(color: ellipse1)),
            ),
            // 右侧小椭圆
            Positioned(
              top: -10,
              right: -25,
              width: 200,
              height: 200,
              child: ClipOval(child: Container(color: ellipse2)),
            ),
            // 叠加登录表单等UI元素
            const Center(child: Text('登录表单区域')),
          ],
        ),
      ),
    );
  }
}

2. 更优方案：使用CustomPaint

如果设计图中的曲线不是标准椭圆，或者需要更精细的形状控制，CustomPaint是更好的选择——它通过Path直接在画布绘制，代码更简洁，性能也更优，还能轻松扩展为贝塞尔曲线等复杂形态。

示例代码：

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  final backgroundColor = const Color(0xFFAFEDB3);
  final ellipse1 = const Color(0xB2F1FFEC);
  final ellipse2 = const Color(0xff9FE3A4);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login screen')),
      body: Container(
        color: backgroundColor,
        child: Stack(
          children: [
            CustomPaint(
              size: MediaQuery.of(context).size,
              painter: CurvePainter(ellipse1, ellipse2),
            ),
            // 叠加登录表单等元素
            const Center(child: Text('登录表单区域')),
          ],
        ),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  final Color color1;
  final Color color2;

  CurvePainter(this.color1, this.color2);

  @override
  void paint(Canvas canvas, Size size) {
    final paint1 = Paint()..color = color1;
    final paint2 = Paint()..color = color2;

    // 绘制左侧大椭圆
    canvas.drawOval(Rect.fromLTWH(-75, -90, 450, 320), paint1);
    // 绘制右侧小椭圆
    canvas.drawOval(Rect.fromLTWH(size.width - 175, -10, 200, 200), paint2);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

内容的提问来源于stack exchange，提问作者kaW