Flutter error "Could not navigate to initial route" - dart

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