Как показать уведомление Toast с Riverpod
Избавляемся от требования BuildContext

При разработке Flutter-приложений часто возникает необходимость отображать уведомления или сообщения Toast. Использование Riverpod для управления состоянием приложения позволяет упростить этот процесс. В этой статье мы рассмотрим, как показать уведомление Toast, используя Riverpod, и избавимся от необходимости передавать BuildContext.

Для начала нам нужно создать провайдер, который будет отвечать за отображение Toast-уведомлений. Мы будем использовать пакет another_flushbar для отображения уведомлений.

import 'package:another_flushbar/flushbar.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Это наш провайдер из riverpod для вызова метода toast из любой функции riverpod
final toastProvider = Provider<ToastBuilder>((ref) => ToastBuilder());

class ToastBuilder {
  void success({
    required String title,
    required String text,
  }) {
    // Продолжительность показа уведомления
    Duration duration = const Duration(seconds: 3);
    _showSuccessToast(
      context: navigatorKey.currentContext!, // Используем глобальный ключ навигации
      title: title,
      text: text,
      duration: duration,
    );
  }

  void _showSuccessToast({
    required BuildContext context,
    required String title,
    required String text,
    required Duration duration,
  }) {
    // Хак, чтобы предотвратить показ toast во время тестов
    if (Platform.environment.containsKey('FLUTTER_TEST')) {
      return;
    }
    if (!context.mounted) {
      return; // Проверяем, смонтирован ли контекст
    }

    // Используем пакет another_flushbar, но есть много других отличных решений
    Flushbar(
      flushbarPosition: FlushbarPosition.TOP,
      title: title,
      message: text,
      // Здесь можно добавить стили
    ).show(context);
  }
}

Далее, нам нужно создать глобальный ключ навигации, чтобы избавиться от требования BuildContext:

/// Не забудьте создать этот глобальный ключ и добавить его в ваш основной маршрутизатор
final navigatorKey = GlobalKey<NavigatorState>();

Теперь мы можем использовать наш провайдер toastProvider в любом месте приложения, где доступен Riverpod, чтобы показать Toast-уведомление:

import 'package:flutter_riverpod/flutter_riverpod.dart';

@Riverpod(keepAlive: false)
class EditAlbumNotifier extends _$EditAlbumNotifier {
  // ...

  Future<void> save() async {
    // ...
    // Например, после сохранения альбома
    ref.read(toastProvider).success(
      title: "Успех",
      text: "Журнал архивирован",
    );
  }
}

Таким образом, мы можем легко отображать Toast-уведомления в нашем Flutter-приложении, используя Riverpod и пакет another_flushbar, а также избавиться от необходимости передавать BuildContext, используя глобальный ключ навигации.

Оцените новую рубрику и напишите в комментариях, что бы вы хотели видеть в следующих выпусках! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #Riverpod #ToastNotifications #FlutterTips