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.

Whenever the widget fails to build

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:

The ultimate goal of this article

Let’s dig into the code and see how we can achieve this:

• First of all, add a builder in your MaterialApp like this:

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 Stateless Widget for 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:

Text(
  kDebugMode
      ? errorDetails.summary.toString()
      : '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!

Flutter Obfuscation

Change Flutter App Launcher Icon