🦋Flutter - Next Level Navigation - Error Handling

#flutter #dart #programming #productivity

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

1. Create an error page
2. Link to the error page

Individualize the error page

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