Search code examples
flutteranimationflutter-animation

Flutter Animation Coming After each other


I want two animated texts to happen after each other, but they happen simultaneously. What is something that would allow them to work after each other.

here is the code

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

class SignupScreen extends StatefulWidget {
  const SignupScreen({super.key});

  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  // Future.delayed(const Duration(milliseconds: 500), () {

  bool work = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(
      children: [
        Container(
          height: 80,
        ),
        AnimatedTextKit(
          animatedTexts: [
            TyperAnimatedText(
              'It all started with an',
              textStyle: TextStyle(fontFamily: "Itim", fontSize: 40),
            )
          ],
          isRepeatingAnimation: false,
           // I WANT THE SAME ANIMATED TEXT TO HAPPEN AFTER THIS
        ),
      ],
    )));
  }
}
 


Solution

  • Here's a snippet from the package documentation: https://pub.dev/packages/animated_text_kit#typer

    return SizedBox(
      width: 250.0,
      child: DefaultTextStyle(
        style: const TextStyle(
          fontSize: 30.0,
          fontFamily: 'Bobbers',
        ),
        child: AnimatedTextKit(
          animatedTexts: [
            TyperAnimatedText('It is not enough to do your best,'),
            TyperAnimatedText('you must know what to do,'),
            TyperAnimatedText('and then do your best'),
            TyperAnimatedText('- W.Edwards Deming'),
          ],
          onTap: () {
            print("Tap Event");
          },
        ),
      ),
    );
    

    Please use it like this:

    Column(
                  children: [
                    AnimatedTextKit(
                      animatedTexts: [
                        TyperAnimatedText('It is not enough to do your best,'),
                        TyperAnimatedText('you must know what to do,'),
                        TyperAnimatedText('and then do your best'),
                        TyperAnimatedText('- W.Edwards Deming'),
                      ],
                      onTap: () {
                        print("Tap Event");
                      },
                    ),
                    AnimatedTextKit(
                      animatedTexts: [
                        TyperAnimatedText('It is not enough to do your best,'),
                        TyperAnimatedText('you must know what to do,'),
                        TyperAnimatedText('and then do your best'),
                        TyperAnimatedText('- W.Edwards Deming'),
                      ],
                      onTap: () {
                        print("Tap Event");
                      },
                    ),
                  ],