|
|
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: <Widget>[ new Stack( children: <Widget>[ WavyHeader() ], ), ], ), ); } }
const List<Color> orangeGradients = [ /*Color(0xFFD21404), Color(0xFFFD7267)*/ Color(0xFF4858A7), Color(0xFF6474C6), ];
const List<Color> 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<Path> { @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<Path> oldClipper) => false; }
|