Как я могу сделать «показать» текстовую анимацию во Flutter?

Question

Я хочу добиться такого поведения, которое показано на странице material.io:

Текст хорошо отображается при отображениив первый раз.

Как я могу сделать это во Флаттере?

Answer 1

Вы можете создавать виджеты следующим образом:

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,
    );
  }
}

Затем вы можете использовать его следующим образом:

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

Обратите внимание, что эти виджеты "ShowUp" могут анимировать что угодно,не только тексты.