DEV Community

Cover image for How to change Flutter Stop Error Screen Style?
Mouaz M. Al-Shahmeh
Mouaz M. Al-Shahmeh

Posted on

How to change Flutter Stop Error Screen Style?

In many cases you need to see the error exception of Flutter as friendly as possible when you develop your app. For example, this red stop screen error:

Image description

Fortunately, the red stop exception error screen of Flutter you can edit as you want with custom style.
In main function of dart you need to add customization of ErrorWidget.builder as the following:
`void main() {
ErrorWidget.builder = (FlutterErrorDetails details) => Material(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
// If you need to add another friendly photo
// you can here for example

         const Text(
          'Error',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.redAccent,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 20),
        Text(
          details.exceptionAsString(),
          textAlign: TextAlign.justify,
          style: const TextStyle(
            color: Colors.red,
            fontSize: 18,
            fontWeight: FontWeight.normal,
          ),
        ),
      ],
    ),
  ),
),
Enter fullscreen mode Exit fullscreen mode

);
runApp(MyApp());
}`

And the result of any error as this instead of it before customization:

Image description

Finally, the error or Flutter exception appear more friendly when you develop your apps.

Top comments (0)