Flutter: How to custom clip an image from bottom to up?

Question

I am developing a flutter project and trying to clip an image. Below is my code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      
      appBar: AppBar(title: Text("THIS IS APP BAR"),),
      body: Stack(
          children: <Widget>[
            Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
              child:ClipPath(
                clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                            "https://picsum.photos/250?image=9"))
                ),
              ),
            ),
          ),
          ],
        ),
    );
  }
}

class ClippingClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height-40);
    path.quadraticBezierTo(size.width / 4, size.height,
        size.width / 2, size.height);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height,
        size.width, size.height - 40);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

Below is the result.

However my intention is not to have the curve from bottom to up. Instead here I have it from bottom to down.

What i need is as below (ignore the lines, they are guide lines from Adobe XD)

How can I get this done?

Answer 1

Change is

path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height-40,        size.width / 2, size.height-40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height-40,        size.width, size.height - 0);
path.lineTo(size.width, 0.0);

Full solution

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("THIS IS APP BAR"),),
      body: Stack(
          children: <Widget>[
            Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
              child:ClipPath(
                clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                            "https://picsum.photos/250?image=9"))
                ),
              ),
            ),
          ),
          ],
        ),
    );
  }
}

class ClippingClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);
    path.quadraticBezierTo(size.width / 4, size.height-40,        size.width / 2, size.height-40);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height-40,        size.width, size.height - 0);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

Answer 2

You just need to invert where you are applying your -40 in the height of the paths being drawn:

path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height - 40,
  size.width / 2, size.height - 40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height - 40,
  size.width, size.height);
path.lineTo(size.width, 0.0);
path.close();