flutter : I want curve clip on top

Question

I am using multiple curve in my container but that is show on bottom. how to set on top? Please help me.

This is my code.

import 'package:evillage_app/style/style.dart';
import 'package:flutter/material.dart';

class MenuCard extends StatefulWidget {
  const MenuCard({Key? key}) : super(key: key);

  @override
  _MenuCardState createState() => _MenuCardState();
}

class _MenuCardState extends State<MenuCard> {
  List menuService = [
    {'name': 'ASAA', 'icon': 'assets/icon/ASAA.png'},
    {'name': 'INFO INDIA', 'icon': 'assets/icon/Info India.png'},
    {'name': 'BUSINESS', 'icon': 'assets/icon/business.png'},
    {'name': 'E-DIARY', 'icon': 'assets/icon/e Diary.png'},
    {'name': 'NEWS', 'icon': 'assets/icon/News.png'},
    {'name': 'SERVICES', 'icon': 'assets/icon/Service.png'},
  ];
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipPath(
          clipper:SkewCut() ,
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.width / 1.58,
            decoration: BoxDecoration(gradient: menuGradient),
            child: GridView.count(
              crossAxisCount: 2,
              childAspectRatio: (2 / 0.75),
              crossAxisSpacing: 2,
              mainAxisSpacing: 5,
              physics: ScrollPhysics(),
              padding: EdgeInsets.symmetric(
                  horizontal: MediaQuery.of(context).size.width / 30,
                  vertical: 13),
              children: List.generate(
                menuService.length,
                (index) {
                  return Container(
                      child: Card(
                    shadowColor: Colors.grey,
                    elevation: 4,
                    child: Container(
                        width: MediaQuery.of(context).size.width / 1,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(25)),
                          color: Colors.white,
                        ),
                        child: ListTile(
                          leading: CircleAvatar(
                            // backgroundColor: red,
                            backgroundImage:
                                AssetImage(menuService[index]['icon']),
                          ),
                          contentPadding: EdgeInsets.only(left: 15),
                          title: Text(
                            menuService[index]['name'].toString(),
                            style: labelStyle(),
                            overflow: TextOverflow.ellipsis,
                          ),
                        )),
                  ));
                },
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class SkewCut extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(
        size.width / 4, size.height - 40, size.width / 2, size.height - 20);
    path.quadraticBezierTo(
        3 / 4 * size.width, size.height, size.width, size.height - 30);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(SkewCut oldClipper) => false;
}

This is ScreenShot

You can also use **flutter_custom_clippers** instead of your shape [here](https://pub.dev/packages/flutter_custom_clippers) — Ravindra S. Patil, Aug 10 '21 at 05:06
*"how to set on top?"* this is because you use `size.height` here: `path.lineTo(size.width, size.height);` which is bottom right corner — pskink, Aug 10 '21 at 05:08
you still are using `size.height` in `path.lineTo(0, size.height);` this is why it goes to the bottom — pskink, Aug 10 '21 at 05:40

score 0 · Answer 1 · answered Aug 10 '21 at 07:17

My suggestion would be using CustomPaint instead of CustomClipper<Path>.

CustomPaint

class SkewCut extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.purpleAccent;
    paint.style = PaintingStyle.fill;

    var pathUp = Path();
    pathUp.moveTo(0, size.height * 0.1033);
    pathUp.quadraticBezierTo(size.width * 0.25, size.height * 0.145,
        size.width * 0.5, size.height * 0.1033);
    pathUp.quadraticBezierTo(size.width * 0.75, size.height * 0.0750,
        size.width * 1.0, size.height * 0.1033);
    pathUp.lineTo(size.width, 0);
    pathUp.lineTo(0, 0);

    canvas.drawPath(pathUp, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

I have just replaced your CustomClipper with CustomPainter.

Usage

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomPaint(
        painter: SkewCut(),
        child: <<YOUR CHILD WIDGET>>,
      ),
    );
  }

score 0 · Answer 2 · answered Aug 10 '21 at 15:40

0

While there are many ways to do this but personally I use the following visual editor to have some generated code and then tweak it based on requirements.

https://fluttershapemaker.com/

This saves me a lot of time and effort.

answered Aug 10 '21 at 15:40

Akshar Patel

8,998
6
35
50

flutter : I want curve clip on top

2 Answers2