How can I make a "show up" text animation in Flutter?

Question

I want to achieve the kind of behavior shown in the material.io page:

The text does a nice transition when is being shown for the first time.

How can I do that in Flutter?

Answer 1

You can compose widgets like this:

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

class ShowUp extends StatefulWidget {
  final Widget child;
  final int delay;

  ShowUp({@required this.child, this.delay});

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

class _ShowUpState extends State<ShowUp> with TickerProviderStateMixin {
  AnimationController _animController;
  Animation<Offset> _animOffset;

  @override
  void initState() {
    super.initState();

    _animController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    final curve =
        CurvedAnimation(curve: Curves.decelerate, parent: _animController);
    _animOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero)
            .animate(curve);

    if (widget.delay == null) {
      _animController.forward();
    } else {
      Timer(Duration(milliseconds: widget.delay), () {
        _animController.forward();
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
    _animController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      child: SlideTransition(
        position: _animOffset,
        child: widget.child,
      ),
      opacity: _animController,
    );
  }
}

Then you can use it like this:

int delayAmount = 500;
...........
...........
...........
Column(
        children: <Widget>[
            ShowUp(
              child: Text("The first texto to be shown"),
              delay: delayAmount,
            ),

            ShowUp(
              child: Text("The text below the first"),
              delay: delayAmount + 200,
            ),

            ShowUp(
              child: Column(
                children: <Widget>[
                  Text("Texts together 1"),
                  Text("Texts together 2"),
                  Text("Texts together 3"),
                ],
              ),
              delay: delayAmount + 400,
            ),
          ],
        ),

Note that this "ShowUp" widgets can animate anything, not just texts.