состояние приложения во Flutter | flutter_bloc

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

У Flutter есть много способов управления состоянием приложения, таких как Provider, Mobx, Redux, Bloc, GetX и др. Среди них наиболее известен Bloc.

Когда мы начинаем использовать Bloc, одним из первых возникающих вопросов является то, в чем разница между Bloc и Cubit и когда следует использовать каждый из них.

Bloc

Для использования Bloc мы должны создать как минимум 3 класса. Bloc, State и Event. Для внесения изменений в этот bloc с UI мы отправляем событие в Bloc, которое вызывает метод события, определенный в Bloc, выполняется операция, и когда метод вызывается, мы записываем новое состояние в emit метод, который отображает изменения в UI. Синтаксис примерно следующий:

BlocProvider.of<MyBloc>(context).add(ChangeColorEvent(Colors.red));

Здесь мы отправляем событие ChangeColorEvent в Bloc MyBloc и передаем цвет Colors.red, чтобы bloc передал новый красный цвет в свое состояние. Мы не получаем результат из вызываемого события, а изменения фиксируются прямо в BlocBuilder или BlocConsumer.

Но что, если нам нужно, чтобы после изменения в Bloc исходя из результата операции нужно было также вызвать другой Bloc или внутренний метод? Например, если мы используем Bloc, который не влияет на текущую страницу, но влияет на страницу ниже текущей, и в зависимости от результата вызываемого события в Bloc, мы должны решить, нужно ли вернуться на предыдущую страницу. Если мы продолжаем использовать Bloc, мы можем удерживать это с помощью BlocListener. Тогда последовательность будет следующей: мы вызываем событие, записываем результат в состояние, а затем просматриваем результат, используя BlocListener. Однако давайте договоримся, что вызывать метод в одном месте и ожидать результата в другом не является правильным, и в мобильном приложении, если случается даже немного таких ситуаций (а такие ситуации случаются очень часто), все становится очень запутанным. Так что мы переходим к Cubit.

Cubit

Синтаксис и структура между Cubit и Bloc различаются, но принцип работы одинаковый. Нам нужно создать только 2 класса, а не 3. Cubit и State. UI остается неизменным. Для выполнения любой операции в Cubit мы просто вызываем метод, определенный внутри него. Примерно так:

BlocProvider.of<MyCubit>(context).changeColor(Colors.red);

Здесь мы просто вызываем метод changeColor в MyCubit Cubit и передаем цвет. Мы можем получить результат вызываемого метода обычным образом. Например.

bool isChanged = BlocProvider.of<MyCubit>.changeColor(Colors.red);

if(isChanged){
  Navigator.pop(context);
} else {
  _showErrorDialog();
}

Здесь мы говорим Cubit изменить цвет и, если изменение происходит успешно, мы возвращаемся на предыдущую страницу, в противном случае мы показываем диалог ошибки.

Разница между Bloc и Cubit не влияет на производительность, поэтому выбор между ними зависит от того, как они используются в конкретных ситуациях. Однако большинство использует Cubit, потому что его использование простое, удобное и понятное. Кроме того, в Cubit есть все, что есть и в Bloc.

Подключение Bloc и Cubit в приложение может быть выполнено следующим образом.

void main() async {
  runApp(MultiBlocProvider(
        providers: [
          BlocProvider.value(value: FirstCubit()),
          BlocProvider.value(value: SecondCubit()),
        ],
        child: MyApp(),
      ));
}

Таким образом, когда мы подключаем Bloc или Cubit таким образом, этот Bloc или Cubit будет активным на протяжении всего приложения. Однако может возникнуть ситуация, когда блок должен использоваться только для одной страницы, и после входа на страницу блок должен быть сброшен. Это можно сделать следующим образом.

Navifor.of(context).push(CupertinoPageRoute(builder: (context) => BlocProvider.value(
      value: FirstCubit(),
      child: FirstPage(),
    )));

Мы просто назначаем FirstCubit к странице FirstPage, когда мы входим в эту страницу, и можем использовать BlocBuilder внутри этой страницы.

Таким образом, мы кратко обсудили разницу между Bloc и Cubit и их включение в приложение. Более подробную информацию вы можете прочитать здесь.