Нема описа
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

background.dart 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import 'package:flutter/material.dart';
  2. class Background extends StatelessWidget {
  3. const Background({Key? key}) : super(key: key);
  4. @override
  5. Widget build(BuildContext context) {
  6. return Scaffold(
  7. resizeToAvoidBottomInset: false,
  8. backgroundColor: Colors.white,
  9. body: Column(
  10. children: <Widget>[
  11. WavyHeader(),
  12. Expanded(
  13. child: Container(),
  14. ),
  15. /*Stack(
  16. alignment: Alignment.bottomLeft,
  17. children: <Widget>[
  18. WavyFooter(),
  19. CirclePink(),
  20. CircleYellow(),
  21. ],
  22. )*/
  23. ],
  24. ),
  25. );
  26. }
  27. }
  28. const List<Color> orangeGradients = [
  29. Color(0xFFFF9844),
  30. Color(0xFFFE8853),
  31. Color(0xFFFD7267),
  32. ];
  33. const List<Color> aquaGradients = [
  34. Color(0xFF5AEAF1),
  35. Color(0xFF8EF7DA),
  36. ];
  37. class WavyHeader extends StatelessWidget {
  38. @override
  39. Widget build(BuildContext context) {
  40. return ClipPath(
  41. clipper: TopWaveClipper(),
  42. child: Container(
  43. decoration: BoxDecoration(
  44. gradient: LinearGradient(
  45. colors: orangeGradients,
  46. begin: Alignment.topLeft,
  47. end: Alignment.center),
  48. ),
  49. height: MediaQuery.of(context).size.height / 2.5,
  50. ),
  51. );
  52. }
  53. }
  54. class WavyFooter extends StatelessWidget {
  55. @override
  56. Widget build(BuildContext context) {
  57. return ClipPath(
  58. clipper: FooterWaveClipper(),
  59. child: Container(
  60. decoration: BoxDecoration(
  61. gradient: LinearGradient(
  62. colors: aquaGradients,
  63. begin: Alignment.center,
  64. end: Alignment.bottomRight),
  65. ),
  66. height: MediaQuery.of(context).size.height / 3,
  67. ),
  68. );
  69. }
  70. }
  71. class CirclePink extends StatelessWidget {
  72. @override
  73. Widget build(BuildContext context) {
  74. return Transform.translate(
  75. offset: Offset(-70.0, 90.0),
  76. child: Material(
  77. color: Colors.pink,
  78. child: Padding(padding: EdgeInsets.all(120)),
  79. shape: CircleBorder(side: BorderSide(color: Colors.white, width: 15.0)),
  80. ),
  81. );
  82. }
  83. }
  84. class CircleYellow extends StatelessWidget {
  85. @override
  86. Widget build(BuildContext context) {
  87. return Transform.translate(
  88. offset: Offset(0.0, 210.0),
  89. child: Material(
  90. color: Colors.yellow,
  91. child: Padding(padding: EdgeInsets.all(140)),
  92. shape: CircleBorder(side: BorderSide(color: Colors.white, width: 15.0)),
  93. ),
  94. );
  95. }
  96. }
  97. class TopWaveClipper extends CustomClipper<Path> {
  98. @override
  99. Path getClip(Size size) {
  100. // This is where we decide what part of our image is going to be visible.
  101. var path = Path();
  102. path.lineTo(0.0, size.height);
  103. var firstControlPoint = new Offset(size.width / 7, size.height - 30);
  104. var firstEndPoint = new Offset(size.width / 6, size.height / 1.5);
  105. path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
  106. firstEndPoint.dx, firstEndPoint.dy);
  107. var secondControlPoint = Offset(size.width / 5, size.height / 4);
  108. var secondEndPoint = Offset(size.width / 1.5, size.height / 5);
  109. path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
  110. secondEndPoint.dx, secondEndPoint.dy);
  111. var thirdControlPoint =
  112. Offset(size.width - (size.width / 9), size.height / 6);
  113. var thirdEndPoint = Offset(size.width, 0.0);
  114. path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy,
  115. thirdEndPoint.dx, thirdEndPoint.dy);
  116. ///move from bottom right to top
  117. path.lineTo(size.width, 0.0);
  118. ///finally close the path by reaching start point from top right corner
  119. path.close();
  120. return path;
  121. }
  122. @override
  123. bool shouldReclip(CustomClipper<Path> oldClipper) => false;
  124. }
  125. class FooterWaveClipper extends CustomClipper<Path> {
  126. @override
  127. Path getClip(Size size) {
  128. var path = Path();
  129. path.moveTo(size.width, 0.0);
  130. path.lineTo(size.width, size.height);
  131. path.lineTo(0.0, size.height);
  132. path.lineTo(0.0, size.height - 60);
  133. var secondControlPoint = Offset(size.width - (size.width / 6), size.height);
  134. var secondEndPoint = Offset(size.width, 0.0);
  135. path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
  136. secondEndPoint.dx, secondEndPoint.dy);
  137. return path;
  138. }
  139. @override
  140. bool shouldReclip(CustomClipper<Path> oldClipper) => false;
  141. }
  142. class YellowCircleClipper extends CustomClipper<Rect> {
  143. @override
  144. Rect getClip(Size size) {
  145. throw UnimplementedError();
  146. }
  147. @override
  148. bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
  149. }