Advertisement
ngekoding

Flutter - Awesome Shape

Sep 10th, 2018
164
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Dart 2.70 KB | None | 0 0
  1. import 'package:flutter/material.dart';
  2.  
  3. class ShapePage extends StatefulWidget {
  4.   @override
  5.   _ShapePageState createState() => _ShapePageState();
  6. }
  7.  
  8. class _ShapePageState extends State<ShapePage> {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: Text('Awesome Shape'),
  14.       ),
  15.       body: Padding(
  16.         padding: const EdgeInsets.all(32.0),
  17.         child: Stack(
  18.           children: <Widget>[
  19.             Container(
  20.               margin: EdgeInsets.only(bottom: 20.0),
  21.               child: ClipPath(
  22.                 clipper: ArcClipper(),
  23.                 child: Container(
  24.                     width: 200.0,
  25.                     height: 50.0,
  26.                     padding: EdgeInsets.all(8.0),
  27.                     color: Colors.lightBlue,
  28.                     child: Center(
  29.                         child: Text(
  30.                       'PROMO',
  31.                       style: TextStyle(
  32.                           color: Colors.white,
  33.                           fontWeight: FontWeight.bold,
  34.                           fontSize: 20.0),
  35.                     ))),
  36.               ),
  37.             ),
  38.             Positioned(
  39.               bottom: 0.0,
  40.               child: ClipPath(
  41.                 clipper: TriangleClipper(),
  42.                 child: Container(
  43.                   width: 20.0,
  44.                   height: 20.0,
  45.                   color: Colors.blue[700],
  46.                 ),
  47.               ),
  48.             )
  49.           ],
  50.         ),
  51.       ),
  52.     );
  53.   }
  54. }
  55.  
  56. class ArcClipper extends CustomClipper<Path> {
  57.   @override
  58.   Path getClip(Size size) {
  59.     var path = Path();
  60.     path.lineTo(15.0, 0.0);
  61.  
  62.     var firstControlPoint = Offset(7.5, 2.0);
  63.     var firstPoint = Offset(5.0, 5.0);
  64.     path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
  65.         firstPoint.dx, firstPoint.dy);
  66.  
  67.     var secondControlPoint = Offset(2.0, 7.5);
  68.     var secondPoint = Offset(0.0, 15.0);
  69.     path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
  70.         secondPoint.dx, secondPoint.dy);
  71.  
  72.     path.lineTo(0.0, size.height);
  73.     path.lineTo(size.width, size.height);
  74.     path.lineTo(size.width - 20, size.height / 2);
  75.     path.lineTo(size.width, 0.0);
  76.     path.close();
  77.  
  78.     return path;
  79.   }
  80.  
  81.   @override
  82.   bool shouldReclip(CustomClipper<Path> oldClipper) => false;
  83. }
  84.  
  85. class TriangleClipper extends CustomClipper<Path> {
  86.   @override
  87.   Path getClip(Size size) {
  88.     var path = Path();
  89.     path.lineTo(0.0, 0.0);
  90.     path.lineTo(size.width, size.height);
  91.     path.lineTo(size.width, 0.0);
  92.     path.close();
  93.  
  94.     return path;
  95.   }
  96.  
  97.   @override
  98.   bool shouldReclip(CustomClipper<Path> oldClipper) => false;
  99. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement