I was wondering how can I achieve something like this, this kind of shape?

CodePudding user response：

Here:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 170,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Center(
                child: ClipPath(
                  clipper: MyClipper(),
                  child: Container(
                    width: 300,
                    height: 170,
                    color: Colors.black,
                  ),
                ),
              ),
              Positioned(
                left: -20,
                child: SizedBox(
                  height: 170,
                  child: Center(
                    child: Material(
                      elevation: 3,
                      color: Colors.black,
                      shadowColor: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      child: const SizedBox(width: 80, height: 80),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final p = Path();
    double facotr = 30;
    p.moveTo(10, 0);
    p.lineTo(10, size.height - 20);
    p.quadraticBezierTo(10, size.height, 20, size.height);
    p.lineTo(size.width - facotr, size.height - facotr);
    p.lineTo(size.width, size.height / 2);
    p.lineTo(size.width - facotr, facotr);
    p.lineTo(20, 0);
    p.quadraticBezierTo(10, 0, 10, 10);
    return p;
  }

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

CodePudding user response：

There is the Paint widget, but also someone made a tool for that wich makes it convienent.

Shape Maker