The Error Widget is typically used to display an error message when the app encounters an exception or a problem that prevents it from rendering correctly. This could be caused by a variety of factors, such as an issue with the app’s code, a problem with the device’s hardware or software, or a problem with the network connection. When an error occurs, the ErrorWidget is automatically displayed, providing the user with a clear indication that something went wrong and that the app is unable to continue.

You can easily implement an Error Widget by adding ErrorWidget.builder to the main() function like this:

void main() {
 ErrorWidget.builder = (FlutterErrorDetails details) {
 return <your widget>;
 };

 return runApp(MyApp());
}

How to use Error Widget Builder in Flutter

Just for an example I am throwing an error from initState() method as below:

void main() {
 ErrorWidget.builder = (FlutterErrorDetails details) {
 return CustomErrorScreen(details: details);
 };

 runApp(MyApp());
}

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

 @override
 State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 @override
 Widget build(BuildContext context) {
 return const MaterialApp(
 home: HomePage(),
 );
 }

@override
 void initState() {
 // TODO: implement initState
 super.initState();
 throw ("Error thrown from initState()");
 }
}

One of the key features of the ErrorWidget is that it can be customized to display a custom error message and/or icon. This allows developers to provide more detailed information about the error and provide guidance on how the user can resolve the problem.

class CustomErrorScreen extends StatelessWidget {
 const CustomErrorScreen({Key? key, required this.details}) : super(key: key);
 final FlutterErrorDetails details;

 @override
 Widget build(BuildContext context) {
 return Material(
 color: Colors.white,
 child: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children: [
 Image.asset(errorImage),
 const Text(
 "Error",
 textDirection: TextDirection.ltr,
 style: TextStyle(
 fontSize: 50,
 fontWeight: FontWeight.w700,
 ),
 ),
 const SizedBox(
 height: 20,
 ),
 Text(
 "${details.exception} ",
 textDirection: TextDirection.ltr,
 style: const TextStyle(
 fontSize: 20,
 fontWeight: FontWeight.w600,
 ),
 ),
 ],
 ),
 ),
 );
 }
}

Result of ErrorWidget for Error handling in a flutter

Conclusion

In conclusion, the ErrorWidget is an important built-in widget in Flutter that plays a key role in handling errors and improving the user experience of your app.

References