Created
January 27, 2020 12:31
-
-
Save vishweshsoni/e44a40ad45e433a31aabb32019044ee3 to your computer and use it in GitHub Desktop.
Animate Text
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:async'; | |
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
debugShowCheckedModeBanner: false, | |
title: 'Show up Demo', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: MyHomePage(title: 'Show up Demo'), | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
MyHomePage({Key key, this.title}) : super(key: key); | |
final String title; | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
backgroundColor: Colors.white, | |
body:Stack( | |
children: <Widget>[ | |
Container( | |
margin: EdgeInsets.only(top:100,left: 200.0), | |
child: FlutterLogo( | |
size: 90.0, | |
), | |
), | |
Container( | |
margin: EdgeInsets.only(top:300,left: 200.0), | |
child: SlideFadeTransition( | |
child: Text( | |
'Clay is a UI/UX design and development\nagency in San Francisco', | |
style: TextStyle( | |
fontSize: 30.0,fontWeight: FontWeight.w700 | |
), | |
), | |
), | |
), | |
], | |
), | |
); | |
} | |
} | |
enum Direction { vertical, horizontal } | |
class SlideFadeTransition extends StatefulWidget { | |
final Widget child; | |
final double offset; | |
final Curve curve; | |
final Direction direction; | |
final Duration delayStart; | |
final Duration animationDuration; | |
SlideFadeTransition({ | |
@required this.child, | |
this.offset = 1.0, | |
this.curve = Curves.easeIn, | |
this.direction = Direction.vertical, | |
this.delayStart = const Duration(seconds: 0), | |
this.animationDuration = const Duration(milliseconds: 800), | |
}); | |
@override | |
_SlideFadeTransitionState createState() => _SlideFadeTransitionState(); | |
} | |
class _SlideFadeTransitionState extends State<SlideFadeTransition> | |
with SingleTickerProviderStateMixin { | |
Animation<Offset> _animationSlide; | |
AnimationController _animationController; | |
Animation<double> _animationFade; | |
@override | |
void initState() { | |
super.initState(); | |
_animationController = AnimationController( | |
vsync: this, | |
duration: widget.animationDuration, | |
); | |
//configure the animation controller as per the direction | |
if (widget.direction == Direction.vertical) { | |
_animationSlide = | |
Tween<Offset>(begin: Offset(0, widget.offset), end: Offset(0, 0)) | |
.animate(CurvedAnimation( | |
curve: widget.curve, | |
parent: _animationController, | |
)); | |
} else { | |
_animationSlide = | |
Tween<Offset>(begin: Offset(widget.offset, 0), end: Offset(0, 0)) | |
.animate(CurvedAnimation( | |
curve: widget.curve, | |
parent: _animationController, | |
)); | |
} | |
_animationFade = | |
Tween<double>(begin: -1.0, end: 1.0).animate(CurvedAnimation( | |
curve: widget.curve, | |
parent: _animationController, | |
)); | |
Timer(widget.delayStart, () { | |
_animationController.forward(); | |
}); | |
} | |
@override | |
void dispose() { | |
_animationController.dispose(); | |
super.dispose(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return FadeTransition( | |
opacity: _animationFade, | |
child: SlideTransition( | |
position: _animationSlide, | |
child: widget.child, | |
), | |
); | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment