Странное поведение анимации AnimatedContainer при переносе в IntrinsicHeight - PullRequest
Новая
       5

Странное поведение анимации AnimatedContainer при переносе в IntrinsicHeight

0 голосов
/ 05 апреля 2020

Я создал контейнер, в котором находятся два AnimatedContainer. Когда я нажимаю кнопку «вниз», я бы хотел, чтобы TextFieldContainer (содержимое с белым TextField посередине) исчезало при уменьшении его размера до 0. В то же время я хочу, чтобы ToolbarContainer отображался путем увеличения его размера. Пока это то, что я получаю:

Animation Behaviour

Похоже, что только один из AnimatedContainers может анимировать свои свойства по одному за раз, что создает werid поведение, как показано, когда один из анимированных контейнеров анимируется быстро, затем медленно, а затем снова быстро.

Как сделать анимацию плавной, чтобы общий размер основного контейнера не изменился, потому что два AnimatedContainer одинаково быстро и одинаково анимируют свой размер?

Вот код для основного контейнера: 

class _MessageToolbarContainerState extends State<MessageToolbarContainer> {
  bool toggleToolbar = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.availableWidth - 75,
      margin: EdgeInsets.only(bottom: 25.0),
      constraints: BoxConstraints(minHeight: 50.0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(25.0)),
        border: Border.all(
          color: Colors.grey,
          width: 2.0,
        ),
      ),
      child: Material(
        borderRadius: BorderRadius.all(Radius.circular(25.0)),
        elevation: 5.0,
        clipBehavior: Clip.antiAlias,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            AnimatedContainer(
              duration: Duration(seconds: 1),
              constraints: BoxConstraints(
                minHeight: toggleToolbar ? 0.0 : 50.0,
                maxHeight: toggleToolbar ? 0.0 : 100.0,
              ),
              child: IntrinsicHeight(
                child: TextFieldContent(
                  onDownPressed: () {
                    setState(() {
                      toggleToolbar = !toggleToolbar;
                      print(toggleToolbar);
                    });
                  },
                ),
              ),
            ),
            AnimatedContainer(
              duration: Duration(seconds: 1),
              constraints: BoxConstraints(
                minHeight: !toggleToolbar ? 0.0 : 50.0,
                maxHeight: !toggleToolbar ? 0.0 : 100.0,
              ),
              child: IntrinsicHeight(
                child: ToolbarContent(
                  onUpPressed: () {
                    setState(() {
                      toggleToolbar = !toggleToolbar;
                      print(toggleToolbar);
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

РЕДАКТИРОВАТЬ:

Я свел проблему к одному виджету. Я поместил свои AnimatedContainers в два виджета IntrinsicHeight, чтобы их содержание не расширялось. Если я удаляю виджеты IntrinsicHeight, я получаю следующий вывод:

New animation

Как ясно показано, анимированные контейнеры теперь анимируются плавно. К сожалению, это не решает мою проблему. Я добавил виджеты IntrinsicHeight, чтобы содержимое расширялось по мере ввода пользователем текста в TextField. Если я удаляю виджеты IntrinsicHeight, содержимое AnimatedContainers не отображается должным образом.

Оригинальный вопрос остается в силе. Как правильно анимировать 2 анимированных контейнера, когда они помещены в виджет IntrinsicHeight?

...