How to to have curve corner in flutter like the file attached using clip path or any other widget?

1.6k Views Asked by At

How to have a curve corner at the top and right and left

1

in flutters like the file attached using clip-path or any other widget? I am trying to curve the corner in the container widget with a child called clip-path. Please anyone can guide me. Is there any other widget to curve the corner? This cannot be done with the border-radius in box decoration.

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

    path.moveTo(size.width / 2, 0);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height);
    path.lineTo(size.width, size.height);

    path.lineTo(0, size.height);

    path.close();
    return path;
  }

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

There are 1 best solutions below

1
On

you can try this with some changes I think you might get it:

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Center(
            child: Container(
              height: 400,
              width: 400,
              child: Transform.rotate(
                angle: 3.14 / 4,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: ColoredBox(
                    color: Colors.blueAccent,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}