Change Flutter app default red error page

What you are going to learn: How to change Flutter app default red error page, also in debug mode show error detail page, in release mode only show a custom message.

Flutter Default Error Page

Flutter use “ErrorWidget” to show red page with error details, unless we replace this(ErrorWidget) with our custom Widget, Flutter using below line by default whether you write or not.

Flutter default “ErrorWidget” on error

Following two steps to replace red error widget page with our own custom widget:

Change Flutter app default red error page

1- Create custom widget, which will replace default “ErrorWidget”.

In Custom widget, when app in debug mode it will show error, in release mode it show a custom message.

i- To get app is in release mode or in debug

import 'package:flutter/foundation.dart' as Foundation;
//Check is it release mode
Foundation.kReleaseMode

ii- In debug mode

SingleChildScrollView(child: Text('Exeption Details:\n\n$detailsException'))

iii- In release mode

Center(child: Text('Sorry for inconvenience',style: TextStyle(fontSize: 24.0),),)

Here is complete custom widget code:

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' as Foundation;
Widget errorScreen(dynamic detailsException) {

  return Scaffold(

    appBar: AppBar(
      title: Text('Error'),
      ),

    body: Padding(
        padding: EdgeInsets.all(20.0),
        child:
            //Check is it release mode
            Foundation.kReleaseMode
            //Widget for release mode
            ?Center(child: Text('Sorry for inconvenience',style: TextStyle(fontSize: 24.0),),)
            //Widget for debug mode
            :SingleChildScrollView(child: Text('Exeption Details:\n\n$detailsException')),
      )
  );

}

2- Assign custom widget to “ErrorWidget.builder” above “runApp(MyApp())” in app’s main method.

import 'package:flutter/material.dart';
void main() {
  //To show custom widget on error instead of ErrorWidget
  ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails) => errorScreen(flutterErrorDetails.exception);
  runApp(MyApp());
}

Here is complete code:

replace flutter default red error page

Thanks for reading, if you like please follow me.