Flutter-如何自动启用AnimatedOpacity？

Question

我正在创建一个仪表板，其中包含两个小部件（文本和两个容器）的Tween动画。但是，我想使两个Container的不透明度从不可见变为缓慢...因此我使用了AnimatedOpacity。但是我不知道该怎么做...

任何帮助，将不胜感激..

class _IntroState extends State<Intro> with SingleTickerProviderStateMixin {
  Animation animation;
  AnimationController animationController;

   @override
   void initState() {
     super.initState();
      animationController = AnimationController(
        duration: Duration(seconds: 2),
        vsync: this,
     );

    animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
        parent: animationController, curve: Curves.fastOutSlowIn));
    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    bool _visible = false;
    final double width = MediaQuery.of(context).size.width;

  return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
         return Scaffold(
           //BODDY
            body: ListView(
              hildren:<Widget>[
                 new Stack(
                   children: <Widget>[
                     new Transform(
                       //ANIMATED OPACITY
                       new AnimatedOpacity(
                          opacity: _visible ? 0.0 : 1.0,
                          duration: Duration(milliseconds: 500),
                          child: new Padding(
                            padding: const EdgeInsets.symmetric(
                                  horizontal: 12.0),
                            child: new Row(
                               children: <Widget>[
                                  Expanded(
                                   child: Row(
                                     children: <Widget>[
                                       child: Padding(
                                         padding: const EdgeInsets.symmetric(horizontal: 8.0),
                                          child: Container(
                                            child: Column(
                                              children: <Widget>[
                                                //THIS THE CONTAINER
                                                new Container(. . .),
                                                new Container(. . .)

Answer 1

要在创建时自动淡入StatelessWidget或StatefulWidget淡入，TweenAnimationBuilder提供了更简单的解决方案：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 0.0, end: 1.0),
        curve: Curves.ease,
        duration: const Duration(seconds: 1),
        builder: (BuildContext context, double opacity, Widget? child) {
          return Opacity(
              opacity: opacity,
              child: Container(width: 20, height: 20, color: Colors.red)
          );
    });
  }
}

有关完整示例，请参阅我的 Codepen： https: //codepen.io/atok/pen/BaZVRPr

此致

Answer 2

代替AnimatedOpacity，使用FadeTransition小部件。这使您可以手动控制动画：

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animationController.drive(CurveTween(curve: Curves.easeOut)),
      child: ...,
    );
  }