|
|
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( alignment: Alignment.bottomCenter, children: <Widget>[ Container( alignment: Alignment.bottomCenter, padding: EdgeInsets.only(top: 0), child: Image.asset( 'assets/images/collaboration.png', width: MediaQuery.of(context).size.width / 1.5, ), ), Container( margin: EdgeInsets.all(0), child: WavyHeader(), ) ], ), Expanded( child: Container(), ), Stack( alignment: Alignment.bottomLeft, children: <Widget>[ WavyFooter(), CirclePink(), CircleYellow(), ], ) ], ), ); } }
const List<Color> orangeGradients = [ Color(0xFF4858A7), Color(0xFF4858A7), Color(0xFF6474C6), ];
const List<Color> aquaGradients = [ /*Color(0xFF8EF7DA), Color(0xFF5AEAF1), Colors.blueAccent,*/ Color(0xFFD170AD), Color(0xFFF19BD1), ];
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 WavyFooter extends StatelessWidget { @override Widget build(BuildContext context) { return ClipPath( clipper: FooterWaveClipper(), child: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: aquaGradients, begin: Alignment.center, end: Alignment.bottomRight), ), height: MediaQuery.of(context).size.height / 3, ), ); } }
class CirclePink extends StatelessWidget { @override Widget build(BuildContext context) { return Transform.translate( offset: Offset(-70.0, 90.0), child: Material( color: Color(0xFF32B44C), child: Padding(padding: EdgeInsets.all(120)), shape: CircleBorder(side: BorderSide(color: Colors.white, width: 15.0)), ), ); } }
class CircleYellow extends StatelessWidget { @override Widget build(BuildContext context) { return Transform.translate( offset: Offset(0.0, 210.0), child: Material( color: Color(0xFFFEE612), child: Padding(padding: EdgeInsets.all(140)), shape: CircleBorder(side: BorderSide(color: Colors.white, width: 15.0)), ), ); } }
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, size.height);
var firstControlPoint = new Offset(size.width / 7, size.height - 30); var firstEndPoint = new Offset(size.width / 6, size.height / 1.5);
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; }
class FooterWaveClipper extends CustomClipper<Path> { @override Path getClip(Size size) { var path = Path(); path.moveTo(size.width, 0.0); path.lineTo(size.width, size.height); path.lineTo(0.0, size.height); path.lineTo(0.0, size.height - 60); var secondControlPoint = Offset(size.width - (size.width / 6), size.height); var secondEndPoint = Offset(size.width, 0.0); path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
return path; }
@override bool shouldReclip(CustomClipper<Path> oldClipper) => false; }
|