How to Customize Flutter Stop Error Screen

 

In this short article, we will replace the message on the Stop Error display when developing in Flutter.

As we know, the default display when experiencing a stop error is like this.

To do this customization, please add accent parameters such as style, align, etc. with the following example:

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: [
			//customize your stop error message here
         
             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,
              ),
            ),
          ],
        ),
      ),
    ),
  );
 runApp(MyApp());
}

and if you try to catch an error, you got this different stop error message: