Avoiding the Dreaded Grey Error Screen in Flutter: Custom Error Handling

Introduction

Flutter, the open-source UI software development kit created by Google, has gained immense popularity among developers for its ability to create stunning, cross-platform mobile applications. While developing apps with Flutter is a rewarding experience, encountering errors is an inevitable part of the journey. One common issue that developers face is the notorious "grey error screen" that can leave users puzzled and frustrated.

This article discusses a strategy for avoiding the grey error screen and provides a solution that gracefully handles errors by creating a custom error screen using the CustomErrorScreen widget.

The Grey Error Screen Problem

The grey error screen is something that no Flutter developer wants users to see. When an error occurs, Flutter displays a screen with a grey background and cryptic error messages, which is far from a user-friendly experience. This screen is typically seen during the development phase when debugging is enabled, and in production, it appears as a blank screen.

To address this issue and ensure that your users have a better experience, you can implement custom error handling using the CustomErrorScreen widget.

Custom Error Handling with CustomErrorScreen

The CustomErrorScreen widget is designed to replace the default grey error screen and provide a more informative and user-friendly experience when an error occurs in your Flutter app. To implement this custom error handling approach, follow these steps:

• Import the Necessary Dependencies

Start by importing the required packages, which include flutter/foundation.dart and flutter/material.dart. You'll need these to build your custom error screen.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

• Create the App CustomErrorScreen Widget

Define the CustomErrorScreen widget, which takes errorDetails as a required parameter. This widget will be displayed when an error occurs instead of the dreaded grey screen in release mode of the Red in debug mode

class AppCustomErrorScreen extends StatelessWidget {
  final FlutterErrorDetails? errorDetails;

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

  @override
  Widget build(BuildContext context) {
    // Custom error screen contents
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/error_illustration.png'),

            Text(
              kDebugMode
                  ? errorDetails.summary.toString()
                  : "Your error message here....",
              textAlign: TextAlign center,
              style: const TextStyle(color: Colors.black, fontSize: 14),
            ),
          ],
        ),
      ),
    );
  }
}

The CustomErrorScreen widget is designed to display a more user-friendly error message when kDebugMode is false, which is typically the case in production.

• Implement Custom Error Handling in Your App

Finally, you can integrate the AppCustomErrorScreen widget into your app to replace the default error handling screen. This is achieved in the MyApp widget, as shown below:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return   MaterialApp(
        builder: (context, Widget? e) {
          ErrorWidget.builder = (FlutterErrorDetails? e) {
            return CustomErrorScreen(
              errorDetails: e!,
            );
          };
          return e!;
        },
        debugShowCheckedModeBanner: false,
        title: 'Your App Name',
        theme: yourTheme,
        home: const SplashScreen(),
      ),
    );

}