如何在Flutter中制作“显示”文本动画？

我想实现material.io页面中所示的行为：

首次显示该文本时，它的过渡效果很好。

如何在Flutter中做到这一点？

您可以像这样编写小部件：

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 with TickerProviderStateMixin {
  AnimationController _animController;
  Animation _animOffset;

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

    _animCOntroller=
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    final curve =
        CurvedAnimation(curve: Curves.decelerate, parent: _animController);
    _animOffset =
        Tween(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: [
            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: [
                  Text("Texts together 1"),
                  Text("Texts together 2"),
                  Text("Texts together 3"),
                ],
              ),
              delay: delayAmount + 400,
            ),
          ],
        ),

请注意，此“ ShowUp”小部件可以设置动画效果，而不仅仅是文本。