CODEWITHSUNDEEP
dartflutter
user6274128
user6274128

Reputation:

Flutter Navigator.pushNamed() custom route animation

I want to use my CustomPageRoute in Navigator.pushNamed() but I can't find a way to use it.

However, I can use it in following way

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

This is my route:

"/page": (context) => MyPage(), // Can I use CustomPageRoute here, if yes then how?

Upvotes: 6

Views: 4910

Answers (2)

geniusvale
geniusvale

Reputation: 91

You can use this package page_transition

and use onGenerateRoute in MaterialApp and then

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

make sure to not include the routes whenyou have delcared it in route: because it will bypass the onGenerateRoute animation that you want.

For usage, just use like usual Navigator.pushNamed(context, '/second');

Upvotes: 2

Cuberob
Cuberob

Reputation: 176

Recently I ran into the same problem "fixed" it with the onGeneratePageRoute hook.

I.e. create a method to dynamically generate the route:

  static Route<dynamic> _onGenerateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/onboarding':
        return MyCustomPageRoute(builder: (context) => OnboardingScreen(), settings: settings);
    }
    throw UnsupportedError('Unknown route: ${settings.name}');
  }

and set it to onGenerateRoute in your MaterialApp

onGenerateRoute: _onGenerateRoute,

Looks like you probably already figured this out based on a previous comments but figured I'd make it easier for future people like me who stumble upon this post!

note: make sure the route name (in this case /onboarding) is not also defined and set to routes on your MaterialApp as it will only trigger your onGenerateRoute if it can't be resolved from your normal routes.

Upvotes: 9

Related Questions