Как создать глобальный snackbar в flutter?

Каким образом можно настроить оповещения об отсутствии интернета, используя библиотеку connectivity_plus в flutter, чтобы сообщения отображались на всех страницах, учитывая что у меня уже есть обработчик изменения состояния в main.dart?
  • 3 января 2024 г. 14:30
Ответы на вопрос 2
Чтобы отобразить Snackbar на всех страницах вашего приложения в Flutter, вам следует использовать `GlobalKey` для доступа к `ScaffoldMessenger` из любой части вашего приложения. С библиотекой `connectivity_plus`, вы можете слушать изменения состояния соединения и отображать соответствующее уведомление. Вот общие шаги для создания глобального Snackbar, который реагирует на изменения состояния интернет-соединения:

1. Создайте `GlobalKey<ScaffoldMessengerState>`:

```dart
final GlobalKey<ScaffoldMessengerState> rootScaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();
```

2. Установите этот ключ для `ScaffoldMessenger` в вашем виджете `MaterialApp`:

```dart
MaterialApp(
  scaffoldMessengerKey: rootScaffoldMessengerKey,
  // ... Настройки MaterialApp
);
```

3. Используйте ваши кастомный обработчик соединения в `main.dart`, подписавшись на поток изменений состояния сети:

```dart
import 'package:connectivity_plus/connectivity_plus.dart';

void main() {
  runApp(MyApp());
  Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
    // Получив изменение состояния, отображаем Snackbar с сообщением
    String message;
    if (result == ConnectivityResult.none) {
      message = 'Нет интернет соединения';
    } else {
      message = 'Интернет соединение восстановлено';
    }
    rootScaffoldMessengerKey.currentState?.showSnackBar(
      SnackBar(
        content: Text(message),
        duration: Duration(seconds: 3),
      ),
    );
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
      scaffoldMessengerKey: rootScaffoldMessengerKey,
    );
  }
}
```

В приведенном примере `Connectivity().onConnectivityChanged.listen()` используется для создания подписки на поток изменений состояния сетевого подключения. Когда состояние изменяется, функция обратного вызова показывает Snackbar с соответствующим сообщением.

Обратите внимание, что `rootScaffoldMessengerKey.currentState` может быть `null` если `ScaffoldMessenger` в данный момент не существует. Это может произойти, например, до полной инициализации виджета `MaterialApp`. Убедитесь, что вы обрабатываете такие случаи корректно в вашем коде.

Также не забывайте подписаться на соединение только один раз и в правильном жизненном цикле приложения, чтобы избежать утечек памяти или множественных подписок.
делайте GlobalKey, привязываете к MaterialApp, к примеру либой get_it чтобы сделать Singleton, теперь в любом месте можно вызвать  showSnackBar(); 

Похожие вопросы