fully rounded corner with ClipPath

Question

I want to create a path like :

but the actual result border is not good:

now I wonder how to have fully rounded corner with ClipPath.

the code is:

class MyClipper extends CustomClipper {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(15, size.height);
    path.quadraticBezierTo(0, size.height / 2, 15, 0);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}

user_11452511 · Answer

Check this out..

class MyClipper extends CustomClipper{
  @override
  Path getClip(Size size) {
    double factor = 20.0;
    var path = Path();
    path.lineTo(0, size.height - factor);
    path.quadraticBezierTo(0, size.height, factor, size.height);
    path.lineTo(size.width-factor, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(factor, 0);
    path.quadraticBezierTo(0, 0, 0, factor);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => true;

}

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClipPath(
          child: Container(color: Colors.blue, child: Text("Received"), padding: EdgeInsets.all(9),),
          clipper: MyClipper(),
        ),
      ),
    );
  }
}

The output:

Another way to achieve it

class Page extends StatelessWidget {
  final radius = Radius.circular(30);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Text("Received"),
          padding: EdgeInsets.all(9),
          decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
              topLeft: radius,
              bottomLeft: radius
            )
          ),
        ),
      ),
    );
  }
}

user_2271213 · Answer

You can get the same result easily with a Container and DecoratedBox:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(child: Center(
        child: Container(
          padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.only(
            topLeft:Radius.circular(25),                              bottomLeft:Radius.circular(25),
        ),),
        child: Text("Received", style: TextStyle(color: Colors.white))
      ),),),
    );
  }
}

fully rounded corner with ClipPath

2 Answers