Customize Grey Error Screen - Flutter
Have you ever seen this ugly grey screen in the release version of your app? In debug version, you’ll see a red screen of death with error details, but if you’re on the release version then you’ll see such a grey screen.
The error screen displayed on debug version is fine, as you’re the only one who’s gonna see it. But if the same error appears on the release version, it will show a grey screen which portrays a bad experience for the users. Ever wondered, if there’s any way to customize it? This is what you can achieve after following the article:
Let’s dig into the code and see how we can achieve this:
- First of all, add a
The magic happens at
ErrorWidget.builder, when an error occurs while building a widget, the broken widget is replaced by the widget returned by this function, and our customized UI widget is returned.
- Let’s make a
CustomError, in my case, it looks like this:
Here, you can distinguish between release and debug versions programmatically by using
kDebugMode flag from
foundation.dart. We will show the error details only if the app is running on debug version:
: 'Oups! Something went wrong!',
ErrorDetails is passed from
builder to our custom stateless widget, from which we are showing the summary of the error.
Well, that’s all! We are done!!
Whenever a grey or red screen appears, it will render our custom UI instead. Isn’t that amazing?
If you learned something from this article, give it a thumbs up or buy me a coffee.
Read my other articles:
Reduce Boilerplate Code with Flutter Hooks!
Use flutter hooks to reduce boilerplate code from your widgets, make it readable and remove duplicates