Skip to content

Instantly share code, notes, and snippets.

@aravindhkumar23

aravindhkumar23/main.dart

Last active January 9, 2024 07:05
Show Gist options
  • Save aravindhkumar23/051cc638686008a966634f5282a9343c to your computer and use it in GitHub Desktop.
Save aravindhkumar23/051cc638686008a966634f5282a9343c to your computer and use it in GitHub Desktop.
Download ZIP
Clipping widgets with bezier curves in Flutter
Raw
main.dart
//access the wavy header in body by below code
return Scaffold(
body: Container(height:200.0,child: new WavyHeader()),
);
//creates a curve with 3 curves merged by using stack
// ref link
https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/
sample output
https://ibb.co/r7Q0B3k
Raw
wavy_header.dart
import 'package:flutter/material.dart';
class WavyHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
ClipPath(
child: new Container(
color: Colors.blue[100],
),
clipper: BottomWaveClipper(),
),
ClipPath(
child: new Container(
color: Colors.blue[200].withOpacity(0.5),
),
clipper: BottomWaveClipper2(),
),
ClipPath(
child: new Container(
color: Colors.blue[300].withOpacity(0.5),
),
clipper: BottomWaveClipper3(),
),
],
);
}
}
class BottomWaveClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final Path path = Path();
path.lineTo(0.0, size.height);
final Offset firstControlPoint = Offset(size.width / 4, size.height);
final Offset firstEndPoint = Offset(size.width / 2.25, size.height - 30.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
final Offset secondControlPoint =
Offset(size.width - (size.width / 3.25), size.height - 65);
final Offset secondEndPoint = Offset(size.width, size.height - 10);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, size.height - 40);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
class BottomWaveClipper2 extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final Path path = Path();
path.lineTo(0.0, size.height - 15);
final Offset firstControlPoint = Offset(size.width / 4, size.height + 20);
final Offset firstEndPoint = Offset(size.width / 1.6, size.height - 30.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
final Offset secondControlPoint =
Offset(size.width / 1.2, size.height - 65);
final Offset secondEndPoint = Offset(size.width, size.height - 20);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, size.height - 20);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
class BottomWaveClipper3 extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final Path path = Path();
path.lineTo(0.0, size.height - 35);
final Offset firstControlPoint = Offset(size.width / 4, size.height - 65);
final Offset firstEndPoint = Offset(size.width / 2, size.height - 10.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
final Offset secondControlPoint =
Offset(size.width - (size.width / 3.25), size.height + 20);
final Offset secondEndPoint = Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, size.height - 20);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
@erlangparasu
Copy link

sample output
https://ibb.co/r7Q0B3k

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment