Переключение флаттера FAB на страницах PageView с анимацией в Scaffold

Question

Итак, я искал несколько мест для того, как это должно быть реализовано, и я уверен, что упускаю что-то тривиальное, но у меня есть приложение с трепетом со Scaffold, телом которого является PageView.Мне нужно иметь другой FAB для некоторых страниц, и способ, которым он в настоящее время настроен, это то, что атрибут FloatActionButton скаффолда настроен для доступа к массиву FloatingActionButtons с индексом _currentPageIndex (частная переменная, совместно используемая bottomNavBar и _pageController.

Это резко меняет FAB, что не является желаемым поведением.

Я пытаюсь заставить FAB анимировать (уменьшать и уменьшать масштаб) при изменении страницы, как в материале spec :

Экраны с вкладками Когда вкладки присутствуют, FAB должен ненадолго исчезнуть, а затем> вновь появиться, когда новый контент перемещается на место. Это выражает>, что FAB не связан ни с каким конкретнымtab.

Буду признателен за любой совет о том, как просто реализовать его (я почти уверен, что упускаю что-то тривиальное). Альтернатива - вручную анимировать вход и выход FAB самостоятельнооборачивая это во что-то.

Answer 1

Вы можете попробовать использовать AnimatedCrossFade Виджет примерно так:

        class TestingNewWidgetState extends State<TestingNewWidget> {
          int currentIndex = 0;

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              floatingActionButton: AnimatedCrossFade(
                crossFadeState: currentIndex == 0
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: Duration(seconds: 1),
                firstChild: FloatingActionButton(
                  onPressed: () => null,
                  child: Icon(Icons.arrow_left),
                  backgroundColor: Colors.red,
                ),
                secondChild: FloatingActionButton(
                  onPressed: () => null,
                  child: Icon(Icons.arrow_right),
                  backgroundColor: Colors.blue,
                ),
              ),
              body: PageView(
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
                children: <Widget>[
                  Scaffold(
                    body: Center(
                      child: Text("page 1"),
                    ),
                  ),
                  Scaffold(
                    body: Center(
                      child: Text("page 2"),
                    ),
                  ),
                ],
              ),
            );
          }
        }

ОБНОВЛЕНИЕ

Помните, что вы можете создать свой собственный виджет, это пример использованияКастом FloatingActionButton:

        class TestingNewWidgetState extends State<TestingNewWidget> {
          int currentIndex = 0;

          @override
          Widget build(BuildContext context) {
            var customFabButton;
            if (currentIndex == 0) {
              customFabButton = CustomFabButton(
                color: Colors.red,
                onPressed: () => null,
                icon: Icons.alarm,
              );
            } else if (currentIndex == 1) {
              customFabButton = CustomFabButton(
                color: Colors.blue,
                onPressed: () => null,
                icon: Icons.satellite,
              );
            } else {
              customFabButton = CustomFabButton(
                color: Colors.green,
                onPressed: () => null,
                icon: Icons.verified_user,
              );
            }

            return Scaffold(
              floatingActionButton: customFabButton,
              body: PageView(
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
                children: <Widget>[
                  Scaffold(
                    body: Center(
                      child: Text("page 1"),
                    ),
                  ),
                  Scaffold(
                    body: Center(
                      child: Text("page 2"),
                    ),
                  ),
                  Scaffold(
                    body: Center(
                      child: Text("page 3"),
                    ),
                  ),
                ],
              ),
            );
          }
        }

        class CustomFabButton extends StatelessWidget {
          final IconData icon;
          final Color color;
          final VoidCallback onPressed;

          const CustomFabButton({Key key, this.icon, this.color, this.onPressed})
              : super(key: key);

          @override
          Widget build(BuildContext context) {
            return GestureDetector(
              onTap: onPressed,
              child: AnimatedContainer(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: color,
                ),
                duration: Duration(seconds: 1),
                height: 50.0,
                width: 50.0,
                child: Icon(icon),
              ),
            );
          }
        }