Отображение пользовательских сообщений об ошибках во Flutter

Обработка ошибок — сложный процесс. Это очень скучно и занимает много времени. Одной из проблем является показ ошибок пользователю в приложении Flutter. Сегодня мы поговорим об этом.

Все проекты используют различные способы показа исключений и ошибок пользователю.

Иногда приложения показывают обычные закуски

Иногда это реализовано с помощью модальных диалогов

Иногда это делается с помощью баннерных экранов

Но я думаю, что это не проблема.
Мы все крутые разработчики и умеем делать любые вещи в UI наших приложений.

Проблема начинается в тот момент, когда нам нужно понять, какие сообщения и где мы хотим показать. И самая главная проблема — как их обработать простым способом для всех сервисов и репозиториев приложения.

Как раз для этого можно использовать библиотеку talker.
Как настроить ее для приложения, я показал в этой статье.

Но сегодня мы поговорим о другом.
Нам нужен простой способ настроить показ сообщений об ошибках один раз и не копировать этот код в приложении постоянно.

😎 Давайте сделаем так…

1) Добавляем зависимость talker_flutter в pubspec.yaml

talker_flutter: ^1.4.0

2) Запустите talker для вашего приложения

void main() {
  final talker = Talker(
    loggerSettings: TalkerLoggerSettings(
      enableColors: !Platform.isIOS,
    ),
  );
  runZonedGuarded(
    () => runApp(
      CustomErrorMessagesExample(talker: talker),
    ),
    (Object error, StackTrace stack) {
      talker.handle(error, stack, 'Uncaught app exception');
    },
  );
}

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TalkerWrapper(
        talker: talker,
        options: const TalkerWrapperOptions(
          enableErrorAlerts: true,
        ),
        child: const Center(child: Text('Your screen')),
      ),
    );
  }

Полный пример вы можете посмотреть в репозитории проекта.

Также вы можете проверить пример приложения talker_shop_app_example с BLoC в качестве управления состоянием и настроенными исключениями, показываемыми talker.

Кастомизация

Но каждый хочет использовать различные виджеты для отображения ошибок.
И этот момент можно решить с помощью библиотеки talker_flutter.

Для того, чтобы настроить snackbars, вы можете использовать опции TalkerWrapper

class TalkerWrapperOptions {
  final String exceptionTitle;
  final String errorTitle;
  final TalkerExceptionBuilder? exceptionAlertBuilder;
  final TalkerErrorBuilder? errorAlertBuilder;
  final bool enableErrorAlerts;
  final bool enableExceptionAlerts;
}

• Использовать exceptionAlertBuilder и errorAlertBuilder для создания пользовательских виджетов в snackbars.
• Используйте enableErrorAlerts и enableExceptionAlerts для фильтрации снэкбаров.
• Используйте exceptionTitle и errorTitle для пользовательских заголовков закусок.

Дополнительная настройка

Если вы хотите показывать другие виджеты (кроме закусочных) — вы можете использовать TalkerListener вместо TalkerWrapper.

TalkerListener(
  talker: talker,
  listener: (data) {
    /// Show your error messages on modal dialogs, screens, etc
  },
  child: /// Your screen or app widget,
);

Заключение

Надеюсь, мне удалось объяснить все, что я хотел, в этой статье.
Спасибо, что прочитали этот небольшой пост🙏!

Подключайтесь ко мне на GitHub и, пожалуйста, поставьте ✨star✨ для пакета talker.
Я буду очень рад, если вы попробуете использовать его в своем приложении