If you are using a dynamic class for routing in Flutter, you may be concerned about errors. How about a static error page (404) when routing fails so the user knows what’s going on?!
This is Part 3 of 4 of my Series: 🦋Flutter - Next Level Navigation. If you haven’t read the other parts yet, I recommend you to do so.
content
Error handling
To catch errors while navigating within the app, we added error queries in the last post. To redirect the user to an error page now requires 2 simple steps.
1. Create an error page
To display an error page we need to create an error page. This can be done either in a separate class or directly in our previously created
RouteGenerator
class. If the error page will be simple, I recommend the last option.
For the error page we now create an internal private function
_errorRoute
, which returns an object
Route<dynamic>
. In the returned page we construct a scaffold object that sets our error message. This might look like the following:
static Route<dynamic> _errorRoute() {
return MaterialPageRoute(builder: (_) {
return Scaffold(
appBar: AppBar(
title: Text('Error'),
),
body: Center(
child: Text('ERROR'),
),
);
});
}
2. Link to the error page
Now, to redirect to the page in every error case we just need to return the function
_errorRoute()
on every error. So our previously created switch-case block will be extended as follows:
class RouteGenerator {
static Route<dynamic> generateRoute(RouteSettings settings) {
final args = settings.arguments;
switch (settings.name) {
case '/page2':
if (args is int) {
return MaterialPageRoute(
builder: (_) =>
IntroductionView(arguments: args));
}
return _errorRoute();
default:
return _errorRoute();
}
}
Individualize the error page
Of course, it is also possible to provide the user with more information on the error page. For example, you can make the error more concrete by trying to pass the cause of the error. This might look like the following:
static Route<dynamic> _errorRoute({String message}) {
return MaterialPageRoute(builder: (_) {
return Scaffold(
appBar: AppBar(
title: Text('Error'),
),
body: Center(
child: Text('ERROR: ' + message),
),
);
});
}
&&
default:
return _errorRoute(message: 'wrong routing name');
Remember to specify the passed error as optional as in the example, so no error can occur when navigating to the error page. I mean how ironic would that be! XD
Follow me to not miss any following posts
See my latest Projects on Github or at [Lucianojung.de](https://lucianojung.de/# work)