Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Text-Animation in Flutter
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
You can’t perform that action at this time.