import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dancing Text',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF191A2E),
      body: Center(
        child: DancingText(text: "Dancing Text"),
      ),
    );
  }
}

class DancingText extends StatefulWidget {
  const DancingText({Key key, @required this.text}) : super(key: key);
  final String text;

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

class _DancingTextState extends State<DancingText> {
  List<GlobalKey<_DTextState>> _keys;

  @override
  void initState() {
    super.initState();
    _keys = List.generate(
      widget.text.length,
      (index) => GlobalKey<_DTextState>(),
    );
    WidgetsBinding.instance.addPostFrameCallback((_) => startLoop());
  }

  startLoop() async {
    while (true) {
      for (final key in _keys) {
        key.currentState.startAnimation();
        await Future.delayed(const Duration(milliseconds: 200));
      }
      await Future.delayed(const Duration(milliseconds: 800));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(
        widget.text.length,
        (index) => DText(
          key: _keys[index],
          char: widget.text[index],
        ),
      ),
    );
  }
}

class DText extends StatefulWidget {
  DText({Key key, @required this.char}) : super(key: key);
  final String char;
  @override
  _DTextState createState() => _DTextState();
}

class _DTextState extends State<DText> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 600),
    );

    _animation = Tween<double>(begin: 0, end: -25).animate(
      CurvedAnimation(curve: Curves.easeInOutCubic, parent: _controller),
    )..addStatusListener((status) {
        if (AnimationStatus.completed == status) {
          _controller.reverse();
        } else if (AnimationStatus.dismissed == status) {
          _controller.reset();
        }
      });
  }

  void startAnimation() {
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) => Transform.translate(
        offset: Offset(0, _animation.value),
        child: child,
      ),
      child: Text(
        widget.char,
        style: TextStyle(color: const Color(0xFFE94560), fontSize: 40.0),
      ),
    );
  }
}