Flutter clip part of Container to make two semicircle half circle. You can use custom clipper + arcToPoint path method to create clean arcs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import 'package:flutter/material.dart'; import 'package:vector_math/vector_math.dart' as v_math; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( body: SafeArea( child: MyHomePage(), ), ), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ ClipPath( clipper: DolDurmaClipper(right: 40, holeRadius: 20), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(15), ), color: Colors.blueAccent, ), width: 300, height: 95, padding: EdgeInsets.all(15), child: Text('first example'), ), ), SizedBox( height: 20, ), ClipPath( clipper: DolDurmaClipper(right: 100, holeRadius: 40), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(15), ), color: Colors.amber, ), width: 200, height: 250, padding: EdgeInsets.all(35), child: Text('second example'), ), ), ]); } } class DolDurmaClipper extends CustomClipper<Path> { DolDurmaClipper({@required this.right, @required this.holeRadius}); final double right; final double holeRadius; @override Path getClip(Size size) { final path = Path() ..moveTo(0, 0) ..lineTo(size.width - right - holeRadius, 0.0) ..arcToPoint( Offset(size.width - right, 0), clockwise: false, radius: Radius.circular(1), ) ..lineTo(size.width, 0.0) ..lineTo(size.width, size.height) ..lineTo(size.width - right, size.height) ..arcToPoint( Offset(size.width - right - holeRadius, size.height), clockwise: false, radius: Radius.circular(1), ); path.lineTo(0.0, size.height); path.close(); return path; } @override bool shouldReclip(DolDurmaClipper oldClipper) => true; } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
