Flutter Navigator 2.0 page transition

Question

I'm using a declarative approach of Navigator:

Navigator(
      pages: [
        MaterialPage(child: _screen),
      ],
      onPopPage: (route, result) {
        return route.didPop(result);
      },
);

How can I add a transition between the screen?

Answer 1

You can set the pageTransitionsTheme in the theme property for your app.

For example:

void main() {
  runApp(
    MaterialApp(
      routes: {
        '/': (_) => HomePage(),
        '/page2': (_) => Page2(),
      },
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            // Set your transitions here:
            TargetPlatform.android: CupertinoPageTransitionsBuilder(),
            TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
            TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
          },
        ),
      ),
    ),
  );
}

But as you mentioned you're using routemaster package (and I personally never used that myself), you can still achieve that behavior by doing something like this:

MaterialApp.router(
  routerDelegate: RoutemasterDelegate(routesBuilder: (_) => routes),
  routeInformationParser: RoutemasterParser(),
  theme: ThemeData.dark().copyWith(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        // Set your transitions here:
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
        TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
      },
    ),
  ),
)

---

Full code (using routemaster package)

void main() => runApp(MyApp());

final routes = RouteMap(
  routes: {
    '/': (_) => MaterialPage(child: HomePage()),
    '/page2': (_) => MaterialPage(child: Page2()),
  },
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
    MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (_) => routes),
      routeInformationParser: RoutemasterParser(),
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            // Set your transitions here:
            TargetPlatform.android: CupertinoPageTransitionsBuilder(),
            TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
            TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
          },
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HomePage')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Routemaster.of(context).push('/page2'),
          child: Text('Page2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}

Answer 2

use this package page_transition at https://pub.dev/packages/page_transition

  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/second':
        return PageTransition(child: SecondPage(), type: PageTransitionType.scale);
        break;
      default:
        return null;
    }
  },