Text Animation

 Text Animation|Text Animation Kit:

Video:

Code:

import 'package:animated_text_kit/animated_text_kit.dart';

//animated_text_kit: ^2.2.0import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  List<Widget> _textAnimationKit = [
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 20.0,
              height: 100.0,
            ),
            Text(
              "Hello!",
              style: TextStyle(fontSize: 40.0),
            ),
            SizedBox(
              width: 20.0,
              height: 100.0,
            ),

            /// Rotate Animated Text Kit widget            RotateAnimatedTextKit(
              onTap: () {
                print("Tap Event");
              },
              isRepeatingAnimation: false,
              text: ["Maherban", "husen", "tech"],
              textStyle: TextStyle(
                fontSize: 40.0,
              ),
            ),
          ],
        ),
      ],
    ),

    /// Fade Animated Text Kit widget    FadeAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: ["maherban!", "husen!!", "tech!!!"],
      textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
    ),
    SizedBox(
      width: 250.0,

      /// Typer Animated Text Kit widget      child: TyperAnimatedTextKit(
        onTap: () {
          print("Tap Event");
        },
        text: [
          "We will tell you,",
          "Flutter, Dart, Widget, UI,",
          "Animation etc in this channel",
          "- maherban husen tech",
        ],
        textStyle: TextStyle(
          fontSize: 30.0,
        ),
      ),
    ),
    SizedBox(
      width: 250.0,

      /// Type writer Animated Text Kit widget      child: TypewriterAnimatedTextKit(
        onTap: () {
          print("Tap Event");
        },
        text: [
          "Flutter is an open-surce UI",
          "Software development kit ",
          "created by google.",
          "it is used to develop Applications for Android.",
        ],
        textStyle: TextStyle(
          fontSize: 30.0,
        ),
      ),
    ),

    /// Scale Animated Text Kit widget    ScaleAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: ["maherban", "husen", "tech", "Subscribe"],
      textStyle: TextStyle(
        fontSize: 70.0,
      ),
    ),

    /// Colorize Animated Text Kit widget    ColorizeAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: [
        "Home Page",
        "Video Page",
        "About Page",
      ],
      textStyle: TextStyle(
        fontSize: 50.0,
      ),
      colors: [
        Colors.deepOrange,
        Colors.yellow,
        Colors.amber,
        Colors.blueGrey,
      ],
    ),

    /// Text Liquid Fill Kit widget    Center(
      child: TextLiquidFill(
        text: 'SUBSCRIBE',
        waveColor: Colors.blueAccent,
        boxBackgroundColor: Colors.redAccent,
        textStyle: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        boxHeight: 350,
      ),
    )
  ];

  /// Sets of Colors  List<Color> _colors = [
    Colors.orange[800],
    Colors.brown[600],
    Colors.lightGreen[800],
    Colors.teal[700],
    Colors.blue[700],
    Colors.blueGrey[50],
    Colors.white  ];

  int _index = 0;

  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Text Animation"),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 40.0,
            width: double.maxFinite,
          ),
          Text(
            labels[_index],
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          Expanded(
            child: Container(),
          ),
          Container(
            decoration: BoxDecoration(color: _colors[_index]),
            child: CircleAvatar(
              child: _textAnimationKit[_index],
              radius: 75.0,
            ),
            height: 350.0,
            width: 350.0,
          ),
          Expanded(
            child: Container(),
          ),
          InkWell(
            child: Icon(
              Icons.play_circle_outline,
              size: 70.0,
            ),
            onTap: () {
              setState(() {
                _index = (_index + 1) % _textAnimationKit.length;
              });
            },
          ),
          SizedBox(
            height: 20.0,
            width: double.maxFinite,
          ),
        ],
      ),
    );
  }
}

const List<String> labels = [
  "Rotate",
  "Fade",
  "Typer",
  "Typewriter",
  "Scale",
  "Colorize",
  "TextLiquidFill"];