CODEWITHSUNDEEP
flutterroutesflutter-web
Mark
Mark

Reputation: 435

"There was no corresponding route" through Flutter web URL

I am using named routes for navigation in my Flutter Web application. When navigating to the desired route the URL updates but I cannot navigate directly to the route through the URL bar. Every time I try adding a path in the URL it takes me to ".../#/"

When performing a hot reload with an updated URL I get the following error:

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

class Start extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Site',
      theme: ThemeData(...),
      initialRoute: '/',
      routes: <String, WidgetBuilder> {
        "/": (context) => MainPage(),
        "/Page_One": (context) => Page2(0),
        "/Page_Two": (context) => Page2(1),
        "/Page_Three": (context) => Page2(2),
      },
    );
  }
}

EDIT: I have also tried this with onGenerateRoute with no luck.

EDIT2: I am calling these both on a production URL and localhost (ex. http://localhost:12345/#/Page_Two. No, localhost:12345/Page_Two and localhost:12345/#Page_Two do not work either.

Edit3: I am calling runApp by void main() => runApp(new MaterialApp(home: Start()));

Upvotes: 6

Views: 8779

Answers (2)

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126644

The reason for this is that you are returning your Start widget in another MaterialApp.

The first MaterialApp widget you return will try to handle the incoming URL.

So your structure is as follows:

-- entrypoint (runApp)
MaterialApp
  Start -- your widget
    MaterialApp
      // the routes live here

The first MaterialApp has no routes, which causes the error.

Consequently, the only change you need to make is to transform your structure into this:

-- entrypoint (runApp)
Start -- your widget
  MaterialApp
    // the routes live here

Code

Change your void main() => runApp(new MaterialApp(home: Start())); to the following:

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

Upvotes: 26

cyberail
cyberail

Reputation: 1284

What about this ?

class Start extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Site',
      theme: ThemeData(...),
      initialRoute: '/',
      routes: <String, WidgetBuilder> {
        "/": (context) => MainPage(),
        "/Page_One": (context, {p=0}) => Page2(p),
        "/Page_Two": (context, {p=1}) => Page2(p),
        "/Page_Three": (context, {p=2}) => Page2(p),
      },
    );
  }
}

Upvotes: 1

Related Questions