Flutter error "Could not navigate to initial route"

Question

I'm getting the following error when starting my Flutter app:

══╡ EXCEPTION CAUGHT BY FLUTTER FRAMEWORK ╞═════════════════════════════════════════════════════════
The following message was thrown:
Could not navigate to initial route.
The requested route name was: "/animals/cats/lolcats"
The following routes were therefore attempted:
 * /
 * /animals
 * /animals/cats
 * /animals/cats/lolcats
This resulted in the following objects:
 * MaterialPageRoute<dynamic>("/", animation: null)
 * MaterialPageRoute<dynamic>("/animals", animation: null)
 * null
 * MaterialPageRoute<dynamic>("/animals/cats/lolcats", animation: null)
One or more of those objects was null, and therefore the initial route specified will be ignored and
"/" will be used instead.
════════════════════════════════════════════════════════════════════════════════════════════════════

I have declared the route /animals/cats/lolcats:

'/animals': (context) => AnimalsScreen(context),
'/animals/dogs': (context) => DogsScreen(context),
'/animals/cats/lolcats': (context) => LolcatsScreen(context),

and set my initialRoute to

initialRoute: '/animals/cats/lolcats',

Why am I getting the above error even though the route is declared?

Answer 1

I think the error logs are quite explicit.

Since you used '/' to divide your routes it's interpreted as "sub-routes". Actually it is trying to go through these routes one after an other:

* /
* /animals
* /animals/cats
* /animals/cats/lolcats

And since /animals/cats isn't define, t is getting an error and then is coming back to initial route : /

If you want to solve this problem rename your routes with underscore like this : /animals_cats_lolcats So it won't try to get /animals/cats which doesn't exist