颤振条件动画

Question

我有5个Stack中的Text是孩子。每个孩子都用FadeTransition对象包装。在堆栈之外，我有5个RaisedButton，每个映射到一个Text。默认情况下，Text 1的透明度为1，其余的为0。单击按钮时，其映射的文本的不透明度变为1，其余部分变为0。 为此，我创建了5个不同的AnimationController并硬编码了很长的逻辑。 我不确定这是在Flutter中执行此操作的正确方法。 我相信必须有一些更简单的方法。  此外，这是一个简化的示例。在我的实际应用中，该问题甚至具有复杂的条件。 （例如，单击按钮5且布尔值hasViewedText1为true时，仅显示文本2和文本3。）

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

class Test extends StatefulWidget {
  @override
  _State createState() {
    return _State();
  }
}

class _State extends State<Test> with TickerProviderStateMixin {
  AnimationController _animationController1;
  AnimationController _animationController2;
  AnimationController _animationController3;
  AnimationController _animationController4;
  AnimationController _animationController5;

  @override
  void initState() {
    super.initState();
    _animationController1 = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 1),
    );
    _animationController2 = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 1),
    );
    _animationController3 = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 1),
    );
    _animationController4 = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 1),
    );
    _animationController5 = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 1),
    );
    _everyThingBackward();
    _animationController1.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: new Text(
          "Testing views",
          style: Theme.of(context).textTheme.title,
        ),
      ),
//      body: _buildBodyAnimationTest(),
//      body:  _buildTuto(),
//      body: _builtLayoutBuilder(),
      body: _builtLayoutConditionalAnimation(),
    );
  }


  Widget _builtLayoutConditionalAnimation() {
    return new Column(
      children: <Widget>[
        new Column(
          children: <Widget>[
            new RaisedButton(child: new Text("Button 1"), onPressed: () {
              _everyThingBackward();
              _animationController1.forward();
            }),
            new RaisedButton(child: new Text("Button 2"), onPressed: () {
              _everyThingBackward();
              _animationController2.forward();
            }),
            new RaisedButton(child: new Text("Button 3"), onPressed: () {
              _everyThingBackward();
              _animationController3.forward();
            }),
            new RaisedButton(child: new Text("Button 4"), onPressed: () {
              _everyThingBackward();
              _animationController4.forward();
            }),
            new RaisedButton(child: new Text("Button 5"), onPressed: () {
              _everyThingBackward();
              _animationController5.forward();
            }),
          ],
        ),
        new Stack(
          children: <Widget>[
            FadeTransition(opacity: _animationController1,child: new Text('Text 1 is clicked')),
            FadeTransition(opacity: _animationController2,child: new Text('Text 2 is clicked')),
            FadeTransition(opacity: _animationController3,child: new Text('Text 3 is clicked')),
            FadeTransition(opacity: _animationController4,child: new Text('Text 4 is clicked')),
            FadeTransition(opacity: _animationController5,child: new Text('Text 5 is clicked')),
          ],
        ),
      ],
    );
  }

  void _everyThingBackward() {
    _animationController1.reverse();
    _animationController2.reverse();
    _animationController3.reverse();
    _animationController4.reverse();
    _animationController5.reverse();

  }
}

Answer 1

通过使用AnimatedSwitcher小部件link to docs，这可以简化很多事情。

这是一个完整的例子：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(child: Center(child: Test())),
      ),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  Widget _child = Text(
    "No Button Tapped!",
    key: UniqueKey(),
  );

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text("Button 1"),
          onPressed: () {
            setState(() {
              _child = Text(
                "Button 1 Tapped!",
                key: UniqueKey(),
              );
            });
          },
        ),
        RaisedButton(
          child: Text("Button 2"),
          onPressed: () {
            setState(() {
              _child = Text(
                "Button 2 Tapped!",
                key: UniqueKey(),
              );
            });
          },
        ),
        RaisedButton(
          child: Text("Button 3"),
          onPressed: () {
            setState(() {
              _child = Text(
                "Button 3 Tapped!",
                key: UniqueKey(),
              );
            });
          },
        ),
        AnimatedSwitcher(
          duration: Duration(milliseconds: 200),
          child: _child,
        ),
      ],
    );
  }
}

这篇中篇文章可能也很有用：https://medium.com/flutter-community/what-do-you-know-about-aniamtedswitcher-53cc3a4bebb8