在flutter上使用animated_text_kit插件初始化多个文本顺序显示

Question

我已经实现了一个TyperAnimatedTextKit：

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(),
                  )

现在我需要使用 intiateWidget2() 来启动另一个 TyperAnimatedTextKit 来打字。基本上我希望第二个 'TyperAnimatedTextKit' 在第一个完成后开始输入。请告知我应该如何实施。

编辑 1(04/07/2020)：两个 TyperAnimatedTextKit 小部件需要在不同的位置实现。

Answer 1

一个简单的方法是在小部件树中为 TyperAnimatedTextKit 小部件使用一个变量，在 initState() 中使用 TyperAnimatedTextKit 的实例（第一个实例）初始化该变量，然后在 initiateWidget2 中设置该变量在 setState() 调用中到 TyperAnimatedTextKit 的新实例（第二个实例）。问题是，TyperAnimatedTextKits 必须使用不同的键进行初始化，否则动画不会在第二个实例中播放。我试着把它放在下面的代码中，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
          ],
        ),
      )
    );
  }
}

在flutter上使用animated_text_kit插件初始化多个文本顺序显示

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

package

flutter

flutter-animation