DecoratedImage with ClipPath

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: MyPainter(),
            child: DecoratedBox(
              position: DecorationPosition.foreground,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: <Color>[
                    Colors.transparent,
                    Colors.red,
                  ],
                ),
              ),
              child: Container(
                height: 454,
                width: 300,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage('https://picsum.photos/300'),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    // Start at the top-left corner
    path.lineTo(size.width * 0.93, 0);
    path.cubicTo(
      size.width * 0.97,
      0,
      size.width,
      size.height * 0.02,
      size.width,
      size.height * 0.05,
    );
    path.lineTo(size.width, size.height * 0.76);
    path.cubicTo(
      size.width,
      size.height * 0.78,
      size.width,
      size.height * 0.8,
      size.width * 0.97,
      size.height * 0.81,
    );

    // Draw the bottom rounded point
    path.lineTo(size.width * 0.54, size.height * 0.98);
    path.arcToPoint(
      Offset(size.width * 0.46, size.height * 0.98),
      radius: Radius.circular(size.width * 0.07),
      clockwise: true, // Change to true to create outward rounding
    );

    path.lineTo(size.width * 0.03, size.height * 0.81);
    path.cubicTo(
      size.width * 0.01,
      size.height * 0.8,
      0,
      size.height * 0.78,
      0,
      size.height * 0.76,
    );
    path.lineTo(0, size.height * 0.05);
    path.cubicTo(
      0,
      size.height * 0.02,
      size.width * 0.03,
      0,
      size.width * 0.07,
      0,
    );
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}