Showing Flutter custom error messages
Tags: flutter, dart, opensource, design
Published: 2022-08-07 08:43:00

Error handling is a complex process. It's very boring and takes a lot of time. One of the problems is showing errors to the user in the Flutter application. Today we will talk about this. 

All projects use different ways to showing exceptions and errors information to user.

Sometimes applications show common snackbars
![Snackbars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux11xb1yn9ohjzzr6sd3.png)
 
Sometimes it realized with modal dialogs
![Modal Dialogs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53kh4s30her5xfxedqpi.png)
 
Sometimes it make with banner screens
![Google banner screens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tt2vjj16x0wdwc73aiba.png)

But I thinks that's not a problem. 
We are all cool developers and know how to make any things in UI of our applications. 

The problem starts at the moment when we need to understand which messages and where we want to show. And the most important problem is **how to process them in a simple way for all services and repositories of the application**

Just for this, you can use the [talker](https://github.com/Frezyx/talker) library. 
How to configure it for the application I showed in [this article](https://dev.to/frezyx/exception-handling-and-logging-in-dartflutter-talker-25o4)

But today we will talk about something else. 
We need a simple way to set up the error messages showing once and not copy this code in the application all the time. 

😎 Let's do this... 

![Talker wrapper example](https://github.com/Frezyx/talker/raw/master/docs/assets/gifs/talker_wrapper_example.gif?raw=true)
 

1) Add talker_flutter dependency in pubspec.yaml
```yaml
talker_flutter: ^1.4.0
```

2) Init talker for your application
```dart
void main() {
  final talker = Talker(
    loggerSettings: TalkerLoggerSettings(
      enableColors: !Platform.isIOS,
    ),
  );
  runZonedGuarded(
    () => runApp(
      CustomErrorMessagesExample(talker: talker),
    ),
    (Object error, StackTrace stack) {
      talker.handle(error, stack, 'Uncaught app exception');
    },
  );
}
```

3) You need to implement wrapper at initial route of your application or at screen which where you want to show error messages. 
```dart
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TalkerWrapper(
        talker: talker,
        options: const TalkerWrapperOptions(
          enableErrorAlerts: true,
        ),
        child: const Center(child: Text('Your screen')),
      ),
    );
  }
```
You can see the full example in the [project repository](https://github.com/Frezyx/talker/tree/feature/master/packages/talker_flutter/example).


And you can check [talker_shop_app_example](https://github.com/Frezyx/talker/tree/master/examples/shop_app_example) application example with BLoC as state management and tuned exceptions showing by talker

![Talker wrapper app example](https://github.com/Frezyx/talker/raw/master/docs/assets/gifs/talker_wrapper_app_example.gif?raw=true)

## Customization
But everyone wants to use different widgets to display errors.
And this point can be solved using the talker_flutter library.

In order to customize snackbars, you can use options of TalkerWrapper 
```dart
class TalkerWrapperOptions {
  final String exceptionTitle;
  final String errorTitle;
  final TalkerExceptionBuilder? exceptionAlertBuilder;
  final TalkerErrorBuilder? errorAlertBuilder;
  final bool enableErrorAlerts;
  final bool enableExceptionAlerts;
}
```

- Use **exceptionAlertBuilder** and **errorAlertBuilder** for build custom widgets in snackbars. 
- Use **enableErrorAlerts** and **enableExceptionAlerts** for filtering snackbars. 
- Use **exceptionTitle** and **errorTitle** for custom snackbar titles. 

## More customization
And if you want to show other widgets (other than Snackbars) - you can use TalkerListener instead of TalkerWrapper.

```dart
TalkerListener(
  talker: talker,
  listener: (data) {
    /// Show your error messages on modal dialogs, screens, etc
  },
  child: /// Your screen or app widget,
);
```

## Conclusion
I hope I managed to explain everything I wanted in the article.
Thank you for reading this small post🙏!

Connect with me on GitHub and pls **put ✨star✨ for [talker](https://github.com/Frezyx/talker) package**
I will be very pleased if you try to use it in your application