CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
Deepak Lohmod
Deepak Lohmod

Reputation: 2272

how to increase the border radius limit in flutter?

I want to crop the top right corner a bit more but even on increasing the border radius. It is not exceeding the center point of the container. Can anyone tell how can i obtain design as shown in the pic.

My Code:-

Material(
            clipBehavior: Clip.antiAlias,
            color: Colors.blue,
            shape: BeveledRectangleBorder(
              borderRadius: BorderRadius.only(
                topRight: Radius.elliptical(40,90),
              ),
            ),
            child: Container(
              height: 100,
              width: 180,
            ),
          ),

Expected:-

enter image description here

Current One:-

Current one

Upvotes: 0

Views: 511

Answers (2)

mkobuolys
mkobuolys

Reputation: 5333

For custom shapes, you can define CustomClipper (you don't need any packages for that):

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: ShapeClipper(),
            child: Container(color: Colors.red, width: 300, height: 200),
          ),
        ),
      ),
    );
  }
}

class ShapeClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width - 100, 0.0)
      ..close();
  }

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

This should cover your case, just adjust the ShapeClipper with specific values.

Upvotes: 1

Deepak Lohmod
Deepak Lohmod

Reputation: 2272

In case anyone else wants this, I found a way. You can use this plugin and modify your code to:-

Diagonal(
            clipHeight: 40,
            axis: Axis.vertical,
            position: DiagonalPosition.BOTTOM_RIGHT,
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 180,
            ),
          ),

Upvotes: 0

Related Questions