Анимация переходов между экранами

Большинство мобильных приложений состоят из более, чем одного экрана. Путь пользователя от одного экрана к другому можно организовать по-разному: с помощью прямых переходов по кнопкам или ссылкам, с помощью бокового выезжающего Drawer, с помощью выпадающего сверху, из AppBar, меню, или при помощи BottomNavigation. Какой бы вариант вы не выбрали для своего приложения, вам, так или иначе, придется столкнутся с вопросом выбора анимации перехода.

За смену, удаление и добавление новых страниц во Flutter отвечает класс Navigator. В нем содержатся статичные методы push, pop и многие другие, используемые при смене экранов.

Типичный переход будет выглядеть следующим образом:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MyPage()),
);

Если мы посмотрим в класс MaterialPageRoute, то увидим в нем следующее:

///  * [PageTransitionsTheme], which defines the default page transitions used
///    by [MaterialPageRoute.buildTransitions].

То есть метод buildTransitions определяет анимацию смены экрана. А это означает, что переопределив этот метод для класса-наследника MaterialPageRoute, который в свою очередь наследует PageRoute, мы можем задать нужное поведение. Сделаем это, установив анимацию плавного исчезания:

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

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

Теперь нужно заменить в строчке вызова перехода класс MaterialPageRoute на наш новый

Navigator.push(
  context,
  MyCustomRoute(builder: (context) => MyPage()),
)),

Все готово.

На самом деле, писать кастомные классы переходов ручками для каждого варианта не так уж удобно — будет немало boilerplate кода. Поэтому проще импортировать библиотеку, которая возьмет на себя эту работу. Она называется page_transition

Чтобы воспользоваться ею, добавьте в pubspec.yaml

dependencies:
  page_transition: ^1.1.5

И теперь та же fade анимация будет выглядеть следующим образом:

Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: MyPage()));

Одна строчка без лишних классов в вашем приложении.