Created
September 12, 2024 18:13
-
-
Save zty5678/954b2e313ff7fdb8d876ffd40a7cf06f to your computer and use it in GitHub Desktop.
flutter new version card demo
This file contains hidden or 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 'package:flutter/material.dart'; | |
| import 'package:google_fonts/google_fonts.dart'; | |
| /// ui design from: https://x.com/vgruev/status/1833163266974961999 | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Card Demo', | |
| theme: ThemeData( | |
| primarySwatch: Colors.blue, | |
| ), | |
| home: const MyHomePage(title: 'Card Demo'), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends StatelessWidget { | |
| const MyHomePage({Key? key, required this.title}) : super(key: key); | |
| final String title; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar( | |
| title: Text(title), | |
| ), | |
| body: Center( | |
| child: Padding( | |
| padding: const EdgeInsets.all(20), | |
| child: AspectRatio( | |
| aspectRatio: 0.666, | |
| child: NewVersionCard( | |
| child: Center( | |
| child: Column( | |
| mainAxisSize: MainAxisSize.min, | |
| crossAxisAlignment: CrossAxisAlignment.center, | |
| children: [ | |
| Image.asset('assets/images/test_flutter.png'), | |
| const SizedBox(height: 10), | |
| Text('New Version!', | |
| style: GoogleFonts.quicksand( | |
| fontSize: 22, | |
| fontWeight: FontWeight.bold, | |
| color: Colors.black, | |
| )), | |
| const SizedBox(height: 10), | |
| Text( | |
| 'It brings a wealth of exciting\n features for both new and\n advanced users.', | |
| style: GoogleFonts.quicksand( | |
| fontSize: 12, | |
| fontWeight: FontWeight.bold, | |
| color: Colors.black, | |
| ), | |
| textAlign: TextAlign.center, | |
| ), | |
| ], | |
| )), | |
| ), | |
| ))), | |
| ); | |
| } | |
| } | |
| class NewVersionCard extends StatelessWidget { | |
| final Widget child; | |
| const NewVersionCard({ | |
| Key? key, | |
| required this.child, | |
| }) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| decoration: BoxDecoration( | |
| gradient: const LinearGradient( | |
| begin: Alignment.topCenter, | |
| end: Alignment.bottomCenter, | |
| colors: [Color(0xffD1A0F1), Color(0xffE6DFCF)]), | |
| borderRadius: BorderRadius.circular(20), | |
| boxShadow: [ | |
| BoxShadow( | |
| color: Colors.grey.withOpacity(0.5), | |
| spreadRadius: 2, | |
| blurRadius: 5, | |
| offset: const Offset(0, 3), | |
| ), | |
| ], | |
| ), | |
| child: Padding( | |
| padding: const EdgeInsets.all(18), | |
| child: CustomPaint( | |
| painter: ChatBubblePainter(), | |
| child: Padding( | |
| padding: const EdgeInsets.all(16), | |
| child: child, | |
| ), | |
| ), | |
| )); | |
| } | |
| } | |
| class ChatBubblePainter extends CustomPainter { | |
| final painter = Paint() | |
| ..color = Colors.black | |
| ..strokeWidth = 1 | |
| ..style = PaintingStyle.stroke; | |
| final shadowPaint = Paint() | |
| ..color = Colors.grey.withOpacity(0.3) | |
| ..style = PaintingStyle.fill | |
| ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 3); | |
| @override | |
| void paint(Canvas canvas, Size size) { | |
| final double width = size.width; | |
| final double height = size.height; | |
| const double radius = 20.0; | |
| final path = Path() | |
| ..moveTo(radius, 0) | |
| ..lineTo(width - radius, 0) | |
| ..arcToPoint(Offset(width, radius + 0), | |
| radius: const Radius.circular(radius), clockwise: false) | |
| ..lineTo(width, height - radius) | |
| ..arcToPoint(Offset(width - radius, height), | |
| radius: const Radius.circular(radius), clockwise: false) | |
| ..lineTo(radius, height) | |
| ..arcToPoint(Offset(0, height - radius), | |
| radius: const Radius.circular(radius), clockwise: false) | |
| ..lineTo(0, radius + 0) | |
| ..arcToPoint(const Offset(radius, 0), | |
| radius: const Radius.circular(radius), clockwise: false) | |
| ..close(); | |
| canvas.drawPath(path, painter); | |
| } | |
| @override | |
| bool shouldRepaint(CustomPainter oldDelegate) => false; | |
| } |
Author
zty5678
commented
Sep 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment