Как оживить движение виджета во флаттере? - PullRequest
0 голосов
/ 09 октября 2019

Я новичок в анимации во Flutter и не выяснил, как анимировать движение виджета между двумя состояниями.

Если я запусту приведенный ниже код, первый дочерний элемент столбца станет невидимым, и появится RaisedButtonгде первый виджет был раньше. Как мне сказать Flutter анимировать это так, чтобы RaisedButton двигался вверх, а не просто появлялся там?

Все решения, которые я нашел, были, на мой взгляд, слишком сложными ...

bool visible = true;
Widget widget1, widget2;

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Visibility(
      visible: visible,
      child: widget1,
    ),
    RaisedButton(
      child: widget2,
      onPressed: () => setState(() => visible = !visible),
    ),
  ],
)

1 Ответ

0 голосов
/ 09 октября 2019

Надеюсь, это поможет

  double height = 200;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        AnimatedContainer(
          duration: Duration(seconds: 3),
          height: height,
          child: Container(height: 200, width: 200, color: Colors.blue),
        ),
        RaisedButton(
          child: Container(height: 200, width: 200, color: Colors.yellow),
          onPressed: () => setState(() => height = height == 0 ? 200 : 0),
        ),
      ],
    );
  }

Вот результат:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...