Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show user-friendly error page instead of exception in Flutter

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.

like image 212
Anis Alibegić Avatar asked Nov 16 '18 09:11

Anis Alibegić


People also ask

How do you show error in Flutter?

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.

How do I fix RenderFlex in Flutter?

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.

How do you handle errors in Flutter?

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 ...

How do you handle an exception in darts?

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.


1 Answers

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:

Before and after (click to enlarge)

like image 178
Anis Alibegić Avatar answered Oct 12 '22 04:10

Anis Alibegić