ClipPath Widget
Project Preview
- Interested in seeing the live demo? Click here to explore.
- Want to view the source code? Visit the project on GitHub.
Code Snippet
import 'package:flutter/material.dart';
class ClipPathWidget extends StatefulWidget {
const ClipPathWidget({super.key});
@override
State<ClipPathWidget> createState() => _ClipPathWidgetState();
}
class _ClipPathWidgetState extends State<ClipPathWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("ClipPath Widget"),
),
body: ClipPath(
clipper: MyClipper(),
child: Container(
width: double.infinity,
height: 300,
color: const Color(0xFF142B46),
),
),
);
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
return Path()
..lineTo(0, size.height)
..quadraticBezierTo(
size.width / 4,
size.height - 40,
size.width / 2,
size.height - 20,
)
..quadraticBezierTo(
3 / 4 * size.width,
size.height,
size.width,
size.height - 30,
)
..lineTo(size.width, 0);
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
}