Initiate the display of multiple text sequentially using animated_text_kit plugin on flutter

Question

I have implemented a TyperAnimatedTextKit as so:

TyperAnimatedTextKit(
                      onTap: () {
                        print("Tap Event");
                      },
                      text: [
                        "Welcome to this application!",
                        "This application demonstrates TyperAnimatedTextKit",
                      ],
                      displayFullTextOnTap: true,
                      isRepeatingAnimation: false,
                      speed: new Duration(milliseconds: 50),
                      textStyle: TextStyle(
                          fontSize: 24.0,
                          fontFamily: "Arvo-Regular",
                          color: Colors.white,
                      ),
                      textAlign: TextAlign.center,
                      alignment: AlignmentDirectional.centerStart,
                      onFinished: intiateWidget2(),
                  )

Now I need to use intiateWidget2() to start another TyperAnimatedTextKit to type. Basically I want the second 'TyperAnimatedTextKit' to start typing after the first one finishes. Please advise as to how I should go about implementing this.

Edit 1(04/07/2020): The two TyperAnimatedTextKit widgets need to be implemented at different locations.

Solution

A simple way to do this is use a variable for the TyperAnimatedTextKit widget in the Widget tree, initialize that variable in initState() with an instance of TyperAnimatedTextKit (the first instance), then, in initiateWidget2, set that variable to a new instance of TyperAnimatedTextKit (the second instance), in a setState() call. The catch is, the TyperAnimatedTextKits have to be initialized with a different key or the animation won't play for the second instance. I tried to put this in code below, hth:

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.black,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  TyperAnimatedTextKit _animatedTextWidget;
  Widget _animatedTextWidget2 = Container();

  @override
  void initState() {
    _animatedTextWidget = intiateWidget1();

    super.initState();
  }
  TyperAnimatedTextKit intiateWidget1() {
    print('initiate 1');
    return TyperAnimatedTextKit(
        key: GlobalKey(),
        onTap: () {
          print("Tap Event");
        },
        text: [
          "Welcome to this application!",
          "This application demonstrates TyperAnimatedTextKit",
        ],
        displayFullTextOnTap: true,
        isRepeatingAnimation: false,
        speed: new Duration(milliseconds: 50),
        textStyle: TextStyle(
          fontSize: 24.0,
          fontFamily: "Arvo-Regular",
          color: Colors.white,
        ),
        textAlign: TextAlign.center,
        alignment: AlignmentDirectional.centerStart,
        onFinished: intiateWidget2
    );
  }

  void intiateWidget2() {
    print('in initiate 2');
    setState(() {
      this._animatedTextWidget2 = TyperAnimatedTextKit(
        key: GlobalKey(),
          onTap: () {
            print("Tap Event");
          },
          text: [
            "Let's get started",
            "with our top secret impossible mission",
          ],
          displayFullTextOnTap: true,
          isRepeatingAnimation: false,
          speed: new Duration(milliseconds: 50),
          textStyle: TextStyle(
            fontSize: 24.0,
            fontFamily: "Arvo-Regular",
            color: Colors.green,
          ),
          textAlign: TextAlign.center,
          alignment: AlignmentDirectional.centerStart,
          onFinished: () => print('finished the second'));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            this._animatedTextWidget,
            Container(height: 15,),
            this._animatedTextWidget2
          ],
        ),
      )
    );
  }
}

Comments

[mukundoesflutter]

Hi @socasanta! Sorry forgot to mention this but I wanted the two TyperAnimatedTextKit at different locations on the UI. Could you please help me out? Have edited the question also..

[socasanta]

Hi, I updated the code to be closer to that. Basically, using a different variable.