I am wondering if is there any efficient way to create a custom shape like this, where I can change the color of each segment?
2
You can do this with CustomClipper like this:
CustomClipper
class CustomDraw2 extends CustomClipper<Path> { @override Path getClip(Size size) { var path = Path(); path.moveTo(0, 0); path.cubicTo( 0, 0, size.height * 0.3, 0, size.height * 0.4, size.height * 0.4); path.cubicTo( size.height * 0.4, size.height * 0.4, size.height * 0.4, size.height * 0.66, size.height * 0.9, size.height * 0.7, ); path.cubicTo( size.height * 0.9, size.height * 0.7, size.height * 1.4, size.height * 0.7, size.height * 1.5, size.height, ); path.lineTo(0, size.height); path.lineTo(0, 0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) { return false; } }
and use it like this:
Container( clipBehavior: Clip.antiAlias, margin: EdgeInsets.all(16), decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)), child: Stack( children: [ Container( height: 100, width: double.infinity, color: Colors.green, ), SizedBox( height: 100, width: 300, child: ClipPath( clipper: CustomDraw2(), child: Container( color: Colors.blueAccent, ), ), ), ], ), )
The best thing you can use is Flutter Shape Maker
Fun Fact: If you know some basics how to draw, it will be fun! It can generate the custom clipper code for you!
Shape Maker Official Website
Reference Video 1 (Basic and Old)
Reference Video 2
Reference Video 3
Been using for some production based application, and working very nicely
Click here to cancel reply.
2
Answers
You can do this with
CustomClipper
like this:and use it like this:
The best thing you can use is Flutter Shape Maker
Fun Fact: If you know some basics how to draw, it will be fun! It can generate the custom clipper code for you!
Shape Maker Official Website
Reference Video 1 (Basic and Old)
Reference Video 2
Reference Video 3
Been using for some production based application, and working very nicely