Is it possible to make global error handling that will show user-friendly error page instead of showing red exception?
I already made error handling (here) that will report exception to the backend but what I really would like to achieve is to hide red exception and show something a little bit frendlier.
I searched everywhere and I found literally nothing. I'm sorry that I don't have any code to show because I have no idea how to start.
We already have a SnackBar widget on Flutter to show such errors or warning messages. To display it using ScaffoldMessenger . Inside the SnackBar, the content is a simple text. If you click on the show message button.
To fix A RenderFlex overflowed by pixels you just have to Wrap Image in flex widget Expanded , height available is calculated then shared among Expanded (as constraints) and Image is resized to fit inside Expanded constraints.
In order to catch all the exceptions in a block of code you wrap the code in try block and use multiple on-catch instructions to handle some specific exceptions, then use catch to handle all other unexpected exceptions, and finally use finally to run the code that should be invoked after the code in try block and in ...
The try / on / catch Blocks The catch block is used when the handler needs the exception object. The try block must be followed by either exactly one on / catch block or one finally block (or one of both). When an exception occurs in the try block, the control is transferred to the catch.
Official docs:
When an error occurs during the build phase, the ErrorWidget.builder callback is invoked to build the widget that is used instead of the one that failed. By default, in debug mode this shows an error message in red, and in release mode this shows a gray background.
You can define it in the builder
method of the MaterialApp widget.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class CustomError extends StatelessWidget { final FlutterErrorDetails errorDetails; const CustomError({ Key key, @required this.errorDetails, }) : assert(errorDetails != null), super(key: key); @override Widget build(BuildContext context) { return Card( child: Padding( child: Text( "Something is not right here...", style: const TextStyle( color: Colors.white, fontWeight: FontWeight.bold, ), ), padding: const EdgeInsets.all(8.0), ), color: Colors.red, margin: EdgeInsets.zero, ); } } class MyApp extends StatelessWidget { MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), builder: (BuildContext context, Widget widget) { ErrorWidget.builder = (FlutterErrorDetails errorDetails) { return CustomError(errorDetails: errorDetails); }; return widget; }, title: 'Flutter Demo', home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: ListView( children: <Widget>[ Text( 'Welcome,', style: Theme.of(context).textTheme.headline6, ), FirstName(), ], padding: const EdgeInsets.all(30.0), ), ); } } class FirstName extends StatelessWidget { FirstName({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Text(null); } }
This is how it looks:
(click to enlarge)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With