Curved Overlay Screen

curved_overlay_screen.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(builder: (_, constraints) {
        return Stack(
          children: [
            Container(
              decoration: const BoxDecoration(color: Colors.red),
              width: double.infinity,
              height: double.infinity,
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: CustomPaint(
                painter: CurvedPainter(color: Colors.brown),
                child: SizedBox(
                  width: constraints.maxWidth,
                  height: constraints.maxHeight * 0.6,
                ),
              ),
            ),
          ],
        );
      }),
    );
  }
}

class CurvedPainter extends CustomPainter {
  CurvedPainter({required this.color});

  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    const percentage = 0.1;
    final turningPoint = size.height * percentage;

    final path = Path()
      ..moveTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, turningPoint)
      ..quadraticBezierTo(
        size.width / 2,
        -turningPoint,
        0,
        turningPoint,
      )
      ..lineTo(0, size.height)
      ..close();

    canvas.drawPath(path, paint);
  }

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