Привет всем любителям Flutter и bloc!
Это моя первая статья по Flutter, так что строго не судите ;)
А сегодня мы поговорим о том, как можно сделать навигацию, применяя паттерн bloc с использованием плагинов bloc, flutter_bloc. Итак, поехали.
Почему bloc? Потому что это предсказуемая библиотека по управлению состояния приложения, которая осуществляет BLoC (business logic component) design pattern, цель которой - упростить отделение презентации от бизнес-логики, облегчая тестирование и повторное использование. В основе bloc лежит реактивное программирование и понятия о событиях и состояниях.
Когда мы дотрагиваемся до чего-то горячего, нашему мозгу посылаются сигналы о боли, мозг их обрабатывает и дает команду - мы оттягиваем руку. Bloc работает примерно так же: он принимает события events, например, нажали на кнопку "скачать", обрабатывает их, возвращая состояние. Например, "Загрузка...", а когда файл загрузился, то возвращает этот файл и состояние "Успех", а если не получилось скачать, то возвращает исключение.
Структура же проекта будет следующей:
Настройка проекта
Начнем с создания нового Flutter проекта, запустив команду в терминале:
flutter create flutter_bloc_navigation_example
Заменим стандартные зависимости на эти:
Заметьте, мы будем использовать библиотеки bloc и flutter_bloc.
Navigation Bloc
NavigationState
Определим NavigationState'ы, какие могут быть у нашего NavigationBloc.
Они могут быть следующими:
- NavigationInitial - начальное состояние приложения,
- StatePageA - когда пользователь находится на экране PageA,
- StatePageB - когда пользователь находится на экране PageB,
Теперь давайте определим и реализуем события NavigationEvent, которые будет обрабатывать наш NavigationBloc.
NavigationEvent
Нашему NavigationBloc необходимо знать, как обрабатывать следующие события:
- AppStarted - сообщает NavigatioBloc о том, что приложение запущено.
- PressedOnPageA - сообщает NavigatioBloc, что нажали на открытие экрана PageA.
- PressedOnPageB - аналогично PressedOnPageA.
Теперь давайте реализуем NavigatioBloc!
NavigationBloc
В методе mapEventToState присутствует условие: если event является AppStarted или PressedOnPageA, то возвращается состояние StatePageA. Если же приходит событие PressedOnPageB, то возвращается StatePageB.
Теперь приступим к реализации пользовательского интерфеса!
Application UI
Создадим экраны PageA и PageB, которые состоят из Scaffold'а, Container'а, в котором с интернета загружается картинка.
Осталось заняться main.dart'ом:
MyApp оборачивается BlocProviderov'ом, который принимает ValueBuilder, отвечающий за создание блока, и дочерний элемент, который будет иметь доступ к блоку через BlocProvider.of (context). Он используется в качестве виджета внедрения зависимостей (DI), чтобы один экземпляр блока мог быть предоставлен виджетам в поддереве.
Затем метод build возвращает BlocBuilder, который обрабатывает создание виджета в ответ на новые состояния, приходящие из Bloc'а. BlocBuilder аналогичен StreamBuilder.
Вот, что в конечном итоге у нас получилось:
