Skip to content

Instantly share code, notes, and snippets.

@hungtrn75
Created July 16, 2020 07:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hungtrn75/347f03b25b263b7bf53822af6cb14d01 to your computer and use it in GitHub Desktop.
Save hungtrn75/347f03b25b263b7bf53822af6cb14d01 to your computer and use it in GitHub Desktop.
Flutter clip part of Container to make two semicircle (half circle)
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment