Блог

Главная - Вопросы по программированию - Как создать плавный переход при трепетании push-маршрута?

Как создать плавный переход при трепетании push-маршрута?

#flutter #flutter-animation

#трепетание #flutter-анимация

Вопрос:

Я пытаюсь создать плавный переход для push-маршрутов, для этого создан пользовательский маршрут, подобный

 class CustomPageRoute<T> extends MaterialPageRoute<T> {
  CustomPageRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(opacity:animation, child: child,  );
  }
}

И вызывая его с помощью кнопки, нажмите, как

 onPressed: () {
   Navigator.push(context, CustomPageRoute(builder: (context) {
       return FirstScreen();
   }));
}

Но это дает странную анимацию со скольжением исчезновение.
Как избежать анимации скольжения в этом?

Вот результат моего кода:

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

Ответ №1:

Вы должны расширяться с PageRoute вместо MaterialPageRoute 

     class CustomPageRoute<T> extends PageRoute<T> {
      CustomPageRoute(this.child);
      @override
      // TODO: implement barrierColor
      Color get barrierColor => Colors.black;

      @override
      String get barrierLabel => null;

      final Widget child;

      @override
      Widget buildPage(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      }

      @override
      bool get maintainState => true;

      @override
      Duration get transitionDuration => Duration(milliseconds: 500);
    }

Использование:

           final page = YourNewPage();
          Navigator.of(context).push(CustomPageRoute(page));

Комментарии:

1. Хм. Я вообще не вижу анимации. Не знаю, почему это очень простой пример.

2. @JoKr Сначала я поддержал ваш комментарий, но обнаружил, что у меня это не работает, потому что у меня был переход на пустую страницу. Мне нужно было добавить Scaffold , чтобы это заработало

3. Woahhh Diegooooooooooooooooooooooooooooooooooooooooooooooooooo, я только что закончил копировать этот код, тогда я понял, что это ты…. diegoveloper..мой любимый флаттер разработчиков.

4. спасибо, это проще, чем использовать PageRouteBuilder

Ответ №2:

Просто создайте метод, который возвращает Route . В качестве параметра передайте новый экранный виджет

 Route createRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  );
}

Для вызова маршрута вы должны использовать

  Navigator.push(
                context,
                createRoute(
                 AnotherScreen(),
                ),
              );

Давайте наслаждаться 🚀