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); }, ), ), ); } }