анимация виджетов в зависимости от состояния в теле скаффолда

Question

У меня есть виджет с эшафотом. Его тело - виджет x, как я могу анимировать в виджете y на теле вместо виджета x? Виджеты имеют вид:

Scaffold(
  body: condition ? X() : Y(),
)

Когда условие переходит от истинного к ложному или от ложного к истинному, я хочу, чтобы виджет Y или X анимировался. Как это сделать?

Answer 1

Вы можете изменить значения Offset, чтобы получить желаемый результат

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

class _TestState extends State<Test>
    with SingleTickerProviderStateMixin {
  bool condition;
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;
  @override
  void initState() {
    condition = false;
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _offsetAnimation =
        Tween<Offset>(begin: Offset(0.0, -5.0), end: Offset.zero)
            .animate(CurvedAnimation(
          curve: Curves.linear,
          parent: _controller,
        ));
    super.initState();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body: InkWell(
        onTap: () {
          setState(() {
            condition = true;
          });
          _controller.forward();
        },
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: 200,
                height: 200,
              ),
              if (condition)
                SlideTransition(
                  position: _offsetAnimation,
                  child: Container(
                    color: Colors.green,
                    width: 100,
                    height: 100,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}