Флаттер: Как сделать обычное обрезание изображения снизу вверх?

Question

Я занимаюсь разработкой проекта флаттера и пытаюсь обрезать изображение. Ниже приведен мой код

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;
}

Ниже приведен результат.

Однако я не намерен иметь кривую снизу наверх Вместо этого здесь у меня это снизу вверх.

Что мне нужно, как показано ниже (игнорируйте линии, они являются направляющими линиями от Adobe XD)

Как мне это сделать?

Answer 1

Изменение

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);

Полное решение

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

Вам просто нужно инвертировать, где вы применяете ваш -40 в высоту прорисованных путей:

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();