Провайдер против Cubit против блока: всестороннее сравнение методов управления состоянием

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

  1. Поставщик:
    Поставщик — это простое, но мощное решение для управления состоянием, которое поставляется в комплекте с Flutter. Он соответствует шаблону InheritedWidget и позволяет вам легко обмениваться данными и получать к ним доступ в дереве виджетов. Вот пример использования Provider:
// Define a model class
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}
// Wrap your app with a Provider
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}
// Use the value in your widgets
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: ${counter.count}'),
              RaisedButton(
                child: Text('Increment'),
                onPressed: () => counter.increment(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  1. Cubit:
    Cubit — это легкое решение для управления состоянием, разработанное командой Flutter. Он соответствует шаблону BLoC (компонент бизнес-логики) и отделяет бизнес-логику от пользовательского интерфейса. Вот пример использования Cubit:
// Define a Cubit class
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}
// Use the Cubit in your widgets
class MyApp extends StatelessWidget {
  final CounterCubit counterCubit = CounterCubit();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Cubit Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BlocBuilder<CounterCubit, int>(
                cubit: counterCubit,
                builder: (context, state) {
                  return Text('Count: $state');
                },
              ),
              RaisedButton(
                child: Text('Increment'),
                onPressed: () => counterCubit.increment(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  1. Bloc:
    Bloc — еще одно решение для управления состоянием, основанное на Cubit. Он добавляет к этому программирование, управляемое событиями, что позволяет обрабатывать сложные асинхронные операции и переходы между состояниями. Вот пример использования Bloc:
// Define events
enum CounterEvent { increment }
// Define a Bloc class
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);
  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
    }
  }
}
// Use the Bloc in your widgets
class MyApp extends StatelessWidget {
  final CounterBloc counterBloc = CounterBloc();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bloc Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BlocBuilder<CounterBloc, int>(
                bloc: counterBloc,
                builder: (context, state) {
                  return Text('Count: $state');
                },
              ),
              RaisedButton(
                child: Text('Increment'),
                onPressed: () => counterBloc.add(CounterEvent.increment),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

В этой статье мы рассмотрели три популярных метода управления состоянием для приложений Flutter: Provider, Cubit и Bloc. Provider предлагает простоту и удобство использования, Cubit предоставляет легкое решение с разделением задач, а Bloc добавляет программирование, управляемое событиями, для более сложных сценариев. В зависимости от требований вашего проекта вы можете выбрать метод, который лучше всего соответствует вашим потребностям.