Самой последней итерацией блочной структуры будет модель программирования Flutter Bloc 8.0. Текущая версия содержит различные обновления по сравнению с предыдущими. Компоновка блоков Flutter стала значительно более надежной, чем в версии 7. Диаграмма последовательности Flutter Bloc 8.0 обеспечивает лучший метод управления состояниями посредством событий. Этот шаблон проектирования помогает отделить хранимые процедуры от внешнего вида. Тестируемость и повторное использование облегчаются за счет использования дизайна BLoC.

Абстрагируя реактивные компоненты шаблона, этот модуль позволяет программистам сосредоточиться на создании бизнес-стратегии. Обработчик событий — это новая функция Flutter Bloc 8.0, которая управляет состояниями. Здесь мы используем дизайн Bloc 8.0 для проекта обратного обновления.

Обзор

Эта программа направлена ​​на упрощение реализации шаблона проектирования BLoC (компонент бизнес-логики). Этот объектно-ориентированный дизайн помогает отделить основную функциональность от внешнего вида. Тестируемость и повторное использование облегчаются за счет использования дизайна BLoC.

Абстрагируя реактивные компоненты дизайна, этот пакет позволяет разработчикам сосредоточиться на разработке бизнес-стратегии. Удаленные программисты Flutter — хороший вариант для создания удобных, доступных, эффективных и визуально привлекательных мобильных приложений.


Что такое Кубит?

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

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


Как спроектировать кубит?

/// A `CounterCubit` which manages an `int` as its state.
class CounterCubit extends Cubit {
  /// The initial state of the `CounterCubit` is 0.
  CounterCubit() : super(0);
  /// When an increment is called, the current state
  /// of the Cubit is accessed via `state` and
  /// a new `state` is emitted via `emit`.
  void increment() => emit(state + 1);
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Как использовать Кубит?

import 'package:flutter/material.dart';
import 'package:flutter_application_1/cubit/example_cubit.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      // Create a Instance for the cubit
      home: BlocProvider(
        create: (context) => ExampleCubit(),
        child: HomePage(),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Cubit Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            // Add the bloc builder to rebuild the state
            BlocBuilder(
              builder: (context, state) {
                return Text(
                  state.toString(),
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        //Call the increment function from the cubit class it will update the bloc builder
        onPressed: () => context.read().increment(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Как соблюдать локоть?

onChange можно переопределить, чтобы отслеживать изменения состояния для одного локтя.

onError можно переопределить, чтобы отслеживать ошибки для одного локтя.

class CounterCubit extends Cubit {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }
  @override
  void onError(Object error, StackTrace stack trace) {
    print('$error, $stackTrace');
    super.onError(error, stackTrace);
  }
}
BlocObserver can be used to observe all cubits.
class MyBlocObserver extends BlocObserver {
  @override
  void onCreate(BlocBase bloc) {
    super.onCreate(bloc);
    print('onCreate -- ${bloc.runtimeType}');
  }
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('onChange -- ${bloc.runtimeType}, $change');
  }
  @override
  void onError(BlocBase bloc, Object error, StackTrace stack trace) {
    print('onError -- ${bloc.runtimeType}, $error');
    super.onError(bloc, error, stackTrace);
  }
  @override
  void onClose(BlocBase bloc) {
    super.onClose(bloc);
    print('onClose -- ${bloc.runtimeType}');
  }
}
void main() {
  BlocOverrides.runZoned(
    () {
    // Use cubits...
    },
    blocObserver: MyBlocObserver(),
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Что такое Блок?

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

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

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

Building a Block
/// The events which `CounterBloc` will react to.
abstract class CounterEvent {}
/// Notifies bloc to increment state.
class Increment extends CounterEvent {}
/// A `CounterBloc` which handles converting `CounterEvent`s into `int`s.
class CounterBloc extends Bloc {
  /// The initial state of the `CounterBloc` is 0.
  CounterBloc() : super(0) {
    /// When an `Increment` event is added,
    /// the current `state` of the Bloc is accessed via the `state` property
    /// and a new state are emitted via `emit.`
    on((event, emit) => emit(state + 1));
  }
}
Using a Bloc
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      // Create a Instance for the Bloc
      home: BlocProvider(
        create: (context) => ExampleBloc(),
        child: HomePage(),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
 const  HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Bloc Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            // Add the bloc builder to rebuild the state
            BlocBuilder(
              builder: (context, state) {
                return Text(
                  state.toString(),
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        //Call the increment function from the cubit class it will update the bloc builder
        onPressed: () => context.read().add(Increment()),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Как изучить блок?

Все блоки реализуют BlocBase, как и Cubits. Следовательно, блок также может переопределять onChange и onError. Однако блоки могут заменить onEvent и onTransition. Каждый раз, когда в блок вводится совершенно новое событие, вызывается onEvent. Переход аналогичен концепции onChange, но в сочетании с текущим состоянием и следующим состоянием он также предоставляет событие, вызвавшее последовательность.

abstract class CounterEvent {}
class Increment extends CounterEvent {}
class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) => emit(state + 1));
  }
  @override
  void onEvent(CounterEvent event) {
    super.onEvent(event);
    print(event);
  }
  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }
  @override
  void onTransition(Transition transition) {
    super.onTransition(transition);
    print(transition);
  }
  @override
  void onError(Object error, StackTrace stackTrace) {
    print('$error, $stackTrace');
    super.onError(error, stackTrace);
  }
}
BlocObserver can be used to observe all blocs as well.
class MyBlocObserver extends BlocObserver {
  @override
  void onCreate(BlocBase bloc) {
    super.onCreate(bloc);
    print('onCreate -- ${bloc.runtimeType}');
  }
  @override
  void onEvent(Bloc bloc, Object? event) {
    super.onEvent(bloc, event);
    print('onEvent -- ${bloc.runtimeType}, $event');
  }
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('onChange -- ${bloc.runtimeType}, $change');
  }
  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print('onTransition -- ${bloc.runtimeType}, $transition');
  }
  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    print('onError -- ${bloc.runtimeType}, $error');
    super.onError(bloc, error, stackTrace);
  }
  @override
  void onClose(BlocBase bloc) {
    super.onClose(bloc);
    print('onClose -- ${bloc.runtimeType}');
  }
}
void main() {
  BlocOverrides.runZoned(
    () {
    // Use blocs...
    },
    blocObserver: MyBlocObserver(),
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Поэтому, пожалуйста, следуйте вышеуказанным шагам, и если у вас есть какие-либо проблемы или предложения, вы можете оставить свое сообщение в разделе комментариев. Мы постараемся решить эту проблему.


Вывод

В этой статье мы объяснили структуру шаблона проектирования Flutter Bloc 8.0.1 в разработке Flutter; Вы можете изменить код по своему выбору. Это было небольшое введение в шаблон проектирования Flutter Bloc 8.0.1 для взаимодействия с пользователем и его работы с Flutter.

Свяжитесь с нами, чтобы создать собственное многофункциональное мобильное приложение Flutter. Flutter Agency — ведущая компания-разработчик Flutter, которая может стать вашим надежным партнером по разработке приложений.

            ##Frequently Asked Questions (FAQs)
Войти в полноэкранный режим

Выйти из полноэкранного режима

1. В чем разница между BLoC и Flutter BLoC?

Пакет ‘bloc’ состоит из вещей, которые вы будете использовать на уровне Bloc, таких как класс Bloc. Это не зависит от Flutter; это всего лишь логическая архитектура вашего приложения. В пакете ‘flutter bloc’ есть элементы, которые вы будете использовать в своем пользовательском интерфейсе.

2. Почему мы должны использовать шаблон BLoC во Flutter?

Этот шаблон идеально подходит практически для всех видов приложений. Это помогает улучшить качество кода и будет обрабатывать управляемое состояние приложения во Flutter. Это сложно для тех, кто только начал использовать Flutter, поскольку он использует передовые методы, такие как потоковое и реактивное программирование.

3. Какая польза от BLoC во Flutter?

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