SnapDrive
SnapDrive

Reputation: 60

Flutter GetX routing will redirected to initialRoute

I currently investigate the following problem: When I try to open the page the first time with link arguments like "xyz.com/invite/dd/dd" I will immediately directed to the initial route "/". When I do it in the same tab again it will work and redirect me to the given page "/invite/dd/dd".

Here the console log for the first try:

The following message was thrown:
Could not navigate to initial route.
The requested route name was: "/invite/dd/dd"
There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

The console log the second try in the same tab:

[GETX] GOING TO ROUTE /dashboard
[GETX] GOING TO ROUTE /invite/dd/dd
[GETX] GOING TO ROUTE /invite/dd/dd
[log] INVITE PAGE!

It all worked fine at the second try when the page is loaded one time before!

The Sourcecode from the GetMaterialAPP in main.dart:

return GetMaterialApp(
            // initialBinding: AuthBinding(),
              initialRoute: RootRoute,
              opaqueRoute: true,
              unknownRoute: GetPage(name: "/not-found", page: () => PageNotFound(), transition: Transition.noTransition),
              defaultTransition: Transition.native,
              // transitionDuration: Duration.zero,
              getPages: [
                GetPage(name: RootRoute, page: () => Root()),
                GetPage(name: AuthenticationPageRoute, page: () => AuthenticationPage()),
                GetPage(name: RegistrationPageRoute, page: () => RegistrationPage()),
                GetPage(name: ForgotPasswordPageRoute, page: () => ForgotPasswordPage()),
                GetPage(name: InvitePageRoute + "/:inviteId/:userId", page: () => InvitePage()),
                // GetPage(name: TrackPageRoute + "/:orderId", page: () => TrackPage())
              ],
              debugShowCheckedModeBanner: false,
              title: 'xyz.com',
              theme: ThemeData(
                hoverColor: Colors.transparent,
                  splashColor: Colors.transparent,
                  // highlightColor: Colors.transparent,
                  primarySwatch: Colors.blue,
                  scaffoldBackgroundColor: light,
                  // scaffoldBackgroundColor: Colors.white,
                  textTheme: GoogleFonts.mulishTextTheme(
                      Theme.of(context).textTheme).apply(
                      bodyColor: Colors.black
                  ),
                  pageTransitionsTheme: PageTransitionsTheme(builders: {
                    TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
                    TargetPlatform.android: FadeUpwardsPageTransitionsBuilder()
                  })
              )
          );

Thanks in advance. Feel free to ask anything.

Upvotes: 0

Views: 2966

Answers (2)

MANISH
MANISH

Reputation: 3348

In my case I have wrapped my GetMaterialApp flutter_no_internet_widget like this :

class MyApp extends StatelessWidget {


const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return InternetWidget(
      offline: const FullScreenWidget(),
      // ignore: avoid_print
      whenOffline: () => print('No Internet'),
      // ignore: avoid_print
      whenOnline: () => print('Connected to internet'),
      loadingWidget: const Center(child: Text('Loading')),
      online: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

as you can see InternetWidget builder is a async task which was creating issue with flutter web routing and hot reload, I removed this implementation and voila hot reload, hot restart, browser refresh, routing everything working fine.

Tip : If you are someone wrapping your MaterialApp with some third party plugin's builder/widget for any of these tasks like : routing middleware, internet connectivity listener, flavour, responsive framework, screenutil, authservice etc make sure that widget/builder functions is not a futurebuilder or async task otherwise it will mess up with your routing. Hope it helps, Happy Coding!

Upvotes: 1

S. M. JAHANGIR
S. M. JAHANGIR

Reputation: 5030

Your code is absolutely OK and working without any issues. I tried but couldn't reproduce it.

However, you need to visit xyz.com/#/invite/dd/dd instead of xyz.com/invite/dd/dd. Visiting xyz.com/invite/dd/dd will redirect to the initial route.

To remove the # from the URL, please refer to this

Upvotes: 2

Related Questions