Показать удобную страницу с ошибкой вместо исключения в Flutter

Можно ли сделать глобальную обработку ошибок, которая будет показывать удобную для пользователя страницу ошибки вместо того, чтобы показывать красное исключение?

Я уже сделал обработку ошибок (здесь), которая будет сообщать об исключении бэкэнду, но я действительно хотел бы добиться, чтобы скрыть красное исключение и показать что-то немного более дружественное.

Я искал везде и буквально ничего не нашел. Мне жаль, что у меня нет кода для показа, потому что я не знаю, с чего начать.

Ответы

Ответ 1

Я открыл вопрос на странице GitHub и получил ответ там.

Widget getErrorWidget(BuildContext context, FlutterErrorDetails error) {
  return Center(
    child: Text(
      "Error appeared.",
      style: Theme.of(context).textTheme.title.copyWith(color: Colors.white),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
      return getErrorWidget(context, errorDetails);
    };

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Решение предоставлено Вутером Хардеманом

UPDATE:

С помощью вышеприведенного решения вы не можете использовать ThemeData, потому что не было никакого экземпляра MaterialApp, когда мы определили наш пользовательский виджет исключений. Чтобы исправить это, используйте:

 Widget getErrorWidget(BuildContext context, FlutterErrorDetails error) {
   return Center(
     child: Text(
       "Error appeared.",
       style: Theme.of(context).textTheme.title.copyWith(color: Colors.white),
     ),
   );
 }

 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
       return getErrorWidget(context, errorDetails);
     };

     return MaterialApp(
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
       builder: (BuildContext context, Widget widget) {
         ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
           return getErrorWidget(context, errorDetails);
         };

         return widget;
       },
       title: 'Flutter Demo',
       home: MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }

Без пользовательской ошибки:

Without custom error

С пользовательской ошибкой:

With custom error

Ответ 2

Опираясь на Spectarion ответ:

  1. Добавлена эшафот. Без Scaffold сообщение появляется поверх ранее обработанного контента.
  2. Перемещено больше кода в вспомогательный метод.

Код:

void setErrorBuilder() {
  ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
    return Scaffold(
        body: Center(
            child: Text("Unexpected error. See console for details.")));
  };
} 

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     setErrorBuilder();

     return MaterialApp(
       builder: (BuildContext context, Widget widget) {
         setErrorBuilder();    
         return widget;
       },
       title: 'Flutter Demo',
       home: MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }