In this example, I will share how to make a show up text animation in Flutter. You can compose widgets like following example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import 'dart:async'; import 'package:flutter/material.dart'; class ShowUp extends StatefulWidget { final Widget child; final int delay; ShowUp({@required this.child, this.delay}); @override _ShowUpState createState() => _ShowUpState(); } class _ShowUpState extends State<ShowUp> with TickerProviderStateMixin { AnimationController _animController; Animation<Offset> _animOffset; @override void initState() { super.initState(); _animController = AnimationController(vsync: this, duration: Duration(milliseconds: 500)); final curve = CurvedAnimation(curve: Curves.decelerate, parent: _animController); _animOffset = Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero) .animate(curve); if (widget.delay == null) { _animController.forward(); } else { Timer(Duration(milliseconds: widget.delay), () { _animController.forward(); }); } } @override void dispose() { super.dispose(); _animController.dispose(); } @override Widget build(BuildContext context) { return FadeTransition( child: SlideTransition( position: _animOffset, child: widget.child, ), opacity: _animController, ); } } |
Then you can use it like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | int delayAmount = 500; ........... ........... ........... Column( children: <Widget>[ ShowUp( child: Text("The first texto to be shown"), delay: delayAmount, ), ShowUp( child: Text("The text below the first"), delay: delayAmount + 200, ), ShowUp( child: Column( children: <Widget>[ Text("Texts together 1"), Text("Texts together 2"), Text("Texts together 3"), ], ), delay: delayAmount + 400, ), ], ), |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
