flutter - потрясающая анимация кнопки, которая будет go сверху вниз

Question

Мне нужна помощь с анимацией, когда я нажимаю на иконку FAB на первом экране, иконка будет go с анимацией, а другой экран (показанный на втором изображении) должен отображаться с анимацией, подобной шторке. И значок fab должен быть установлен на панели приложения точно так же, как второе изображение.

На обоих экранах должно быть нижнее меню, как на скриншотах.

Answer 1

Просто оберните кнопки на каждой странице с помощью виджета Hero, например:

Hero(
 tag: 'fab',
 child: FloatingActionButton()
);

Answer 2

С дизайном, который вы хотите достичь, я предлагаю вам использовать slide_up_panel вместо нажатия на новый экран.

У него есть параметр collapsed, в который вы можете поместить FloatingActionButton развернуть панель на кране и показать ту же кнопку внутри расширенной панели. Просто установите панель не перетаскиваемой, и она не будет расширяться при пролистывании.

Пожалуйста, внимательно прочитайте ее документацию, я уверен, что вы можете достичь желаемого эффекта с помощью этого виджета.

Answer 3

Вы можете сделать одну вещь, просто обернув плавающую кнопку действия в AnimatedContainer

   AlignmentDirectional _ironManAlignment = AlignmentDirectional.bottomCenter; 

   ...

   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   floatingActionButton: AnimatedContainer(
        duration: Duration(seconds: 2),
        alignment: _ironManAlignment,
        child: FloatingActionButton(
          onPressed: () {
            _flyIronMan();
          },
          child: Icon(Icons.add),
        ),
      ),

, например, когда вы нажимаете кнопку, затем вызываете этот метод

  void _flyIronMan() {
    setState(() {
      _ironManAlignment =
          AlignmentDirectional(0.0, -0.8); //AlignmentDirectional(0.0,-0.7);
    });
  }