Last active
August 9, 2021 05:54
-
-
Save doyle-flutter/cb4df26c355ceb919d5bb1c731ffe6e0 to your computer and use it in GitHub Desktop.
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/foundation.dart'; | |
| import 'package:flutter/material.dart'; | |
| void main() => runApp(App()); | |
| class App extends StatelessWidget { | |
| const App({Key? key}) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp(home: Main(),); | |
| } | |
| } | |
| class Main extends StatefulWidget { | |
| const Main({Key? key}) : super(key: key); | |
| @override | |
| _MainState createState() => _MainState(); | |
| } | |
| class _MainState extends State<Main> { | |
| double size = 400.0; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| backgroundColor: Colors.white, | |
| appBar: AppBar( | |
| title: Text("Paint Animation"), | |
| centerTitle: true, | |
| ), | |
| body: Container( | |
| width: MediaQuery.of(context).size.width, | |
| alignment: Alignment.center, | |
| child: Stack( | |
| children: [ | |
| Container( | |
| width: this.size, | |
| height: this.size, | |
| decoration: BoxDecoration( | |
| image: DecorationImage( | |
| fit: BoxFit.cover, | |
| image: NetworkImage("https://cdn.pixabay.com/photo/2017/01/14/12/59/iceland-1979445__480.jpg") | |
| ) | |
| ), | |
| ), | |
| Positioned( | |
| top: 0, | |
| bottom: 0, | |
| left: 0, | |
| right: 0, | |
| child: AnimContainer(size: this.size,), | |
| ) | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class AnimContainer extends StatefulWidget { | |
| final double size; | |
| const AnimContainer({Key? key, required this.size}) : super(key: key); | |
| @override | |
| _AnimContainerState createState() => _AnimContainerState(); | |
| } | |
| class _AnimContainerState extends State<AnimContainer> with SingleTickerProviderStateMixin{ | |
| AnimationController? ct; | |
| Animation? anim; | |
| @override | |
| void initState() { | |
| this.ct = AnimationController(vsync: this, duration: Duration(seconds: 3),) | |
| ..addListener(() { | |
| if(!this.mounted) return; | |
| setState(() {}); | |
| }); | |
| this.anim = Tween<double>(begin: widget.size, end: 0).animate(this.ct!); | |
| setState(() {}); | |
| Future.delayed(Duration(seconds: 3), () async => await this.ct!.forward()); | |
| super.initState(); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return (this.anim == null || this.ct == null) ? Container() : CustomPaint( | |
| painter: Mc(size: Size(widget.size, this.anim!.value)), | |
| ); | |
| } | |
| } | |
| class Mc extends CustomPainter{ | |
| final Size size; | |
| const Mc({required this.size}); | |
| @override | |
| void paint(Canvas canvas, Size size) { | |
| final pathPaint = Paint() | |
| ..color = Colors.white | |
| ..style = PaintingStyle.fill | |
| ..strokeWidth = 4; | |
| Path path = Path(); | |
| path.lineTo(0.0,this.size.width); | |
| path.lineTo(this.size.height*0.90,this.size.width); | |
| path.lineTo(this.size.height*0.80,this.size.width/2); | |
| path.lineTo(this.size.height*0.90,0.0); | |
| path.close(); | |
| canvas.drawPath(path, pathPaint); | |
| } | |
| @override | |
| bool shouldRepaint(covariant CustomPainter oldDelegate) => true; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment