Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a custom blured shape with rounded corners in Flutter

I want to draw a custom shape similar to the marked area of below image. Is there a way to clip this custom shape with blur effect and then specify the radius for the corners?

This marked shaped

like image 752
Rafiqul Hasan Avatar asked May 07 '18 10:05

Rafiqul Hasan


People also ask

How do you make a rounded corner card in Flutter?

You can set the shape property to RoundedRectangleBorder() or CircleBorder() in order to create a circle Card. If you use RoundedRectangleBorder, the key point here is to increase the border radius to a large number, at least half the width of the Card's child.

How do you give rounded corners to an elevated Button in Flutter?

Flutter ElevatedButton With Rounded Corners we will change the style of ElevatedButton using style property. We can use ElevatedButton. styleFrom() and provide RoundedRectangleBorder as shape property value. BorderRadius.


1 Answers

Here is the full example

enter image description here

class Customclipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = new Path();
    path.lineTo(0.0, size.height - 20);
    path.quadraticBezierTo(0.0, size.height, 20.0, size.height);
    path.lineTo(size.width - 20.0, size.height);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height - 20);
    path.lineTo(size.width, 50.0);
    path.quadraticBezierTo(size.width, 30.0, size.width - 20.0, 30.0);
    path.lineTo(20.0, 5.0);
    path.quadraticBezierTo(0.0, 0.0, 0.0, 20.0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
  1. Created all the rounded corners using quadraticBezierTo
  2. Created a Container inside a ClipPath
  3. Used the Colors.white70 for the container color
like image 134
Raouf Rahiche Avatar answered Oct 17 '22 15:10

Raouf Rahiche