How To Create Typing Text Animation Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Create Blinking Text Animation in Flutter Android iOS Example Tutorial, gives us separate package class named as animation. dart to perform all type of animations. I need a call the user attention to a button. The first idea that came to mind is to add a blink animation.

How To Create Typing Text Animation Using Flutter App

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

Related Post