CODEWITHSUNDEEP
flutterdarttransition
JakesMD
JakesMD

Reputation: 2166

Flutter: flutter_page_transition with multiple named routes doesn't work

I need to transition between my screens with named routes. But when I use more than 1 route it transitions with the default transition and not the one from the flutter_page_transitions library.

This doesn't work:

      initialRoute: '/first',
      routes: {
        '/first': (context) => First(),
        '/second': (context) => Second(),
        '/third': (context) => Third(),
      },
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/first': {
              return PageTransition(
                  child: First(), type: PageTransitionType.fade);
          }
          break;

          case '/second': {
              return PageTransition(
                  child: Second(), type: PageTransitionType.fade);
          }
          break;

          case '/third': {
              return PageTransition(
                  child: Third(), type: PageTransitionType.fade);
          }
          break;

          default: {
            return null;
          }
        }
      },

This works

      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/first': {
              return PageTransition(
                  child: First(), type: PageTransitionType.fade);
          }
          break;

          default: {
            return null;
          }
        }
      },

Upvotes: 0

Views: 290

Answers (2)

JakesMD
JakesMD

Reputation: 2166

Thanks guys! Solution: I commented out the routes

      home: First();
      //initialRoute: '/first',
      /*routes: {
        '/first': (context) => First(),
        '/second': (context) => Second(),
        '/third': (context) => Third(),
      },*/
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/first': {
              return PageTransition(
                  child: First(), type: PageTransitionType.fade);
          }
          break;

          case '/second': {
              return PageTransition(
                  child: Second(), type: PageTransitionType.fade);
          }
          break;

          case '/third': {
              return PageTransition(
                  child: Third(), type: PageTransitionType.fade);
          }
          break;

          default: {
            return null;
          }
        }
      },

Upvotes: 1

GrahamD
GrahamD

Reputation: 3165

You shouldn't have the same route in both routes: and onGenerateRoute. They are mutually exclusive. So choose which code block you want to process your route.

OnGenerateRoute picks up routes that are not specified in routes:

Upvotes: 1

Related Questions