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 release version then you’ll see such 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 release version, it will show a grey screen which portrays bad experience for the users. Ever wondered, if there’s any way to customize it? This is what you can achieve after following along the article:

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

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

  @override

  Widget build(BuildContext context) {

  return MaterialApp(

  ......

  builder: (BuildContext context, Widget? widget) {

  ErrorWidget.builder = (FlutterErrorDetails errorDetails) {

  return CustomError(errorDetails: errorDetails);

  };

  return widget!;

  },

  ......

  );}

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:

  class CustomError extends StatelessWidget {

  final FlutterErrorDetails errorDetails;

  const CustomError({Key? key,required this.errorDetails}) : super(key: key);

  @override

  Widget build(BuildContext context) {

  return Scaffold(

  backgroundColor: Colors.white,

  body: Padding( padding: const EdgeInsets.all(16.0),

  child: Column(

  mainAxisAlignment: MainAxisAlignment.center,

  children: [

  Image.asset('assets/images/error_pic.png'),

  Text(kDebugMode? errorDetails.summary.toString()

  : 'Oups! Something went wrong!',

  textAlign: TextAlign.center,

  style: const TextStyle(

  color: kDebugMode ? Colors.red :

  Colors.black,

  fontWeight: FontWeight.bold,

  fontSize: 21),

  ),

  const SizedBox(height: 12),

  const Text(

  kDebugMode

  ? 'https://docs.flutter.dev/testing/errors'

  : "We encountered an error and we've notified our engineering team about it. Sorry for the inconvenience caused.",

  textAlign: TextAlign.center,

  style: TextStyle(color: Colors.black, fontSize: 14),),],),),);}}