🦋Flutter - Next Level Navigation - Error Handling
Tags: flutter, dart, programming, productivity
Published: 2021-04-13 18:12:47

> 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](https://dev.to/lucianojung/series/12052) yet, I recommend you to do so.

## content
<ul>
    <li><a href="#error-handling">Error handling</a></li>
    <ul>
      <li><a href="#1-create-an-error-page">1. Create an error page</a></li>
    <li><a href="#2-link-to-the-error-page">2. Link to the error page</a></li>
    </ul>
    <li><a href="#individualize-the-error-page">Individualize the error page</a></li>
</ul>

## 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:



``` dart
  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:

``` dart
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:

``` dart
  static Route<dynamic> _errorRoute({String message}) {
    return MaterialPageRoute(builder: (_) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Error'),
        ),
        body: Center(
          child: Text('ERROR: ' + message),
        ),
      );
    });
  }
```

&&

``` dart
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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wtpvq02mzobtz4lx46j.png)
[Follow me](https://dev.to/lucianojung) to not miss any following posts
See my latest Projects on [Github](https://github.com/login?return_to=%2Flucianojung) or at [Lucianojung.de](https://lucianojung.de/#work)

-----
#### You may also like:

{% link https://dev.to/lucianojung/global-variable-access-in-flutter-3ijm %}

{% link https://dev.to/lucianojung/flutter-next-level-navigation-nh4 %}

{% link https://dev.to/lucianojung/flutter-singelton-pattern-1a38 %}