👣 Flutter: организация кода с помощью BLoC

Когда новичок приходит в разработку на Flutter, он быстро сталкивается с двумя вещами: виджетами и управлением состоянием. И если с виджетами все более-менее понятно: нарисовал кнопку, вывел текст, то управление состоянием вызывает вопросы. Особенно когда речь заходит о BLoC. Многие воспринимают его как очередную библиотеку, которую можно подключить и забыть. На деле BLoC - это способ перестать смешивать логику и интерфейс и начать думать потоками данных.


Состояние - это все, что видит пользователь:

Все, что отображается на экране - это состояние. Цвет кнопки, текст в заголовке, видимость лоадера - все это состояния. Даже пустой контейнер - это состояние, просто со значением «ничего не показывать».

Когда приложение маленькое, состояние можно хранить прямо в виджете. Вызвал setState и интерфейс обновился. Но как только логика усложняется, такой подход превращает код в кашу. Презентация мешается с бизнес-логикой, а разобраться, почему при нажатии на кнопку что-то пошло не так, становится сложно.

Выход - отделить логику от отрисовки. Вынести состояние наружу, сделать его независимым от виджетов. И вот здесь появляется BLoC.


Как BLoC меняет правила игры:

BLoC (Business Logic Component) работает по простой схеме: события -> обработка -> новые состояния. Пользователь нажал кнопку - это событие. BLoC его поймал, сходил в репозиторий, что-то посчитал и выдал новое состояние. Виджет это состояние увидел и перерисовался.

Важно, что BLoC ничего не знает о том, как именно рисуется интерфейс. Ему все равно, текст это, кнопка или анимация. Его задача: принять событие, выполнить логику и вернуть состояние. За это его и ценят: логика становится переиспользуемой и тестируемой независимо от UI.


Архитектура вокруг BLoC:

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

🔵Data Layer: модели, репозитории, провайдеры данных (API, база).

🔵Business Logic Layer: сам BLoC, который обрабатывает события и общается с репозиториями.

🔵Presentation Layer: виджеты, которые подписаны на состояния и реагируют на них.

Такое разделение позволяет менять один слой, не трогая другие. Захотели заменить REST API на GraphQL - меняете только Data Layer. Интерфейс переехал на новую дизайн-систему - трогаете только Presentation Layer.


Улучшенное тестирование:

Когда логика вынесена из виджетов, ее становится легко тестировать. BLoC можно скормить события и проверить, какие состояния он выдал. Это не требует запуска приложения, эмулятора или взаимодействия с UI. Просто юнит-тесты, которые бегут за секунды.


🔗 Ссылка на подробную статью


💡 Вывод:

BLoC - это не просто способ управлять состоянием. Это способ думать о приложении как о потоке данных, где интерфейс - лишь отражение текущего состояния. Да, порог входа выше, чем у setState. Но когда проект вырастает, именно архитектура спасает от хаоса. BLoC заставляет разделять ответственность, писать тестируемый код и не смешивать логику с отрисовкой.


➡️ Flutter & Dart | Мобильный трудоголик