Typing Text Animation
Complete Code For Typing Text Animation In Flutter
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
Animation<int> _characterCount;
int _stringIndex;
static const List<String> _kStrings = const <String>[
'BajarangiSoft.com',
'Flutter',
'Google.com',
'Youtube.com',
];
String get _currentString => _kStrings[_stringIndex % _kStrings.length];
AnimationController controller;
@override
void initState() {
super.initState();
controller = new AnimationController(
duration: const Duration(milliseconds: 4000),
vsync: this,
);
setState(() {
_stringIndex = _stringIndex == null ? 0 : _stringIndex + 1;
_characterCount = new StepTween(begin: 0, end: _currentString.length)
.animate(
new CurvedAnimation(parent: controller, curve: Curves.easeIn));
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
TextStyle textStyle = theme.textTheme.title.copyWith(
color: theme.primaryColor,
);
return new Scaffold(
appBar: AppBar(
backgroundColor: Colors.red[900],
title: Text("Typing Text Animation")),
body: new Container(
margin: new EdgeInsets.symmetric(vertical: 50.0, horizontal: 10.0),
child: _characterCount == null
? null
: new AnimatedBuilder(
animation: _characterCount,
builder: (BuildContext context, Widget child) {
String text =
_currentString.substring(0, _characterCount.value);
return new Text(text, style: textStyle);
},
),
),
);
}
}