Created with <3 with dartpad.dev.
Last active
September 26, 2022 16:52
-
-
Save kenyk7/2ebc91177aa9ee20c196ab265d6ac18d to your computer and use it in GitHub Desktop.
Flutter BlendMode cards CustomPainter, Logo Nequi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:math' as math; | |
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
body: Center( | |
child: Stack( | |
children: [ | |
cardCenter( | |
degrees: 25, | |
color: const Color(0xff25c2c9), | |
), | |
cardCenter( | |
degrees: 55, | |
color: const Color(0xfff50c61), | |
), | |
], | |
), | |
), | |
), | |
); | |
} | |
Widget cardCenter({required int degrees, required Color color}) { | |
return Center( | |
child: Transform.rotate( | |
angle: degrees * math.pi / 180, | |
child: ClipPath( | |
clipper: ClipperCardPath(), | |
child: Container( | |
width: 240, | |
height: 220, | |
decoration: BoxDecoration( | |
color: color, | |
backgroundBlendMode: BlendMode.multiply, | |
), | |
), | |
), | |
), | |
); | |
} | |
} | |
class ClipperCardPath extends CustomClipper<Path> { | |
@override | |
Path getClip(Size size) { | |
final double sw = size.width; | |
final double sh = size.height; | |
const double radius = 25; | |
const double radiusLg = 40; | |
const double ipx = 15; | |
const double ipy = 25; | |
Path path = Path() | |
..moveTo(ipx, ipy radius) | |
..quadraticBezierTo(ipx, ipy, ipx radius, ipy) | |
..lineTo(sw - radius - ipx * 2, 0) | |
..quadraticBezierTo(sw - ipx * 2, 0, sw - ipx * 2, radius) | |
..lineTo(sw, sh - radiusLg) | |
..quadraticBezierTo(sw, sh, sw - radiusLg, sh) | |
..lineTo(radiusLg, sh) | |
..quadraticBezierTo(0, sh, 0, sh - radiusLg) | |
..close(); | |
return path; | |
} | |
@override | |
bool shouldReclip(CustomClipper<Path> oldClipper) { | |
return false; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment