How to cliping container from center top

Question

Hello everyone I want to clip container from center top. I tried with custom clipper but not get success. Anyone please help me how to draw container like below image.

My Code

ClipPath(
              clipper: TriangleClipper(),
              child: Container(
                height: 120,
                color: Colors.red,
              ),
            ),

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var firstControlPoint = Offset(size.width / 2.5, 50.0);
    var firstEndPoint = Offset(size.width / 2, 10.0);
    var secondControlPoint = Offset(size.width - (size.width / 2.5), 50);
    var secondEndPoint = Offset(size.width, 50);
    var path = Path()
      ..lineTo(0, 50)
      ..lineTo(0, 70)
      ..cubicTo(0, 70, 0, 50, 20, 50)
      ..quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
          firstEndPoint.dx, firstEndPoint.dy)
      ..quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
          secondEndPoint.dx, secondEndPoint.dy)
      ..lineTo(size.width - 20, 50)
      ..cubicTo(size.width - 20, 50, size.width, 50, size.width, 70)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..close();

    return path;
  }

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

Output:

This [question](https://stackoverflow.com/questions/58853355/how-to-draw-a-line-with-a-pointed-triangle-in-flutter) might help you. You just need to change the direction of clip — Khyati Modi, Jul 30 '21 at 10:25

score 0 · Answer 1 · answered Jul 30 '21 at 12:26

i think you were missing path.moveTo(0.0, size.height);

import 'package:flutter/material.dart';

class CardCliping extends StatelessWidget {
  const CardCliping({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple.shade300,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipPath(
              clipper: TriangleClipper(),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.white)),
                width: 130,
                height: 40,
              ),
            ),
            Container(
              width: 400,
              height: 100,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(40),
                  border: Border.all(color: Colors.white, width: 0)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                    onTap: () {},
                    child: Icon(
                      Icons.home_outlined,
                      color: Colors.deepPurpleAccent,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {},
                    child: Icon(
                      Icons.person_outline_outlined,
                      color: Colors.deepPurpleAccent,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

    path.moveTo(0.0, size.height);

    path.lineTo(size.width * .5, 0);

    //we dont need this
    // path.lineTo(size.width, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

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

How to cliping container from center top

1 Answers1