import 'package:flutter/material.dart'; class Background extends StatelessWidget { const Background({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false, backgroundColor: Colors.white, body: Column( children: [ new Stack( children: [ WavyHeader() ], ), ], ), ); } } const List orangeGradients = [ /*Color(0xFFD21404), Color(0xFFFD7267)*/ //Color(0xFF03A0FE), Color(0xFF4858A7), Color(0xFF6474C6), ]; const List aquaGradients = [ Color(0xFF8EF7DA), Color(0xFF5AEAF1), Colors.blueAccent, ]; class WavyHeader extends StatelessWidget { @override Widget build(BuildContext context) { return ClipPath( clipper: TopWaveClipper(), child: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: orangeGradients, begin: Alignment.topLeft, end: Alignment.center), ), height: MediaQuery.of(context).size.height / 2.5, ), ); } } class TopWaveClipper extends CustomClipper { @override Path getClip(Size size) { // This is where we decide what part of our image is going to be visible. var path = Path(); path.lineTo(0.0, 0.0); var firstControlPoint = new Offset(0, size.height - 30); var firstEndPoint = new Offset(0, size.height / 2); path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy); var secondControlPoint = Offset(size.width / 5, size.height / 4); var secondEndPoint = Offset(size.width / 1.5, size.height / 5); path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy); var thirdControlPoint = Offset(size.width - (size.width / 9), size.height / 6); var thirdEndPoint = Offset(size.width, 0.0); path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy); ///move from bottom right to top path.lineTo(size.width, 0.0); ///finally close the path by reaching start point from top right corner path.close(); return path; } @override bool shouldReclip(CustomClipper oldClipper) => false; }