Explanation of cubit in flutter with example

In Flutter, a Cubit is a variation of the Bloc (business logic component) pattern that has a simpler API and a more intuitive way of representing state changes. Like the Bloc pattern, the Cubit pattern separates the business logic of an app from its user interface (UI) and allows developers to build reusable and testable business logic that can be shared across multiple UI elements.

Here's an example of how you might use a Cubit in a Flutter app:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterCubit(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterCubit counterCubit = context.bloc<CounterCubit>();

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Text(
          '${counterCubit.state}',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              onPressed: counterCubit.increment,
              child: Icon(Icons.add),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              onPressed: counterCubit.decrement,
              child: Icon(Icons.remove),
            ),
          ),
        ],
      ),
    );
  }
}

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

In the above example, the CounterCubit is a Cubit that manages the state of a simple counter.

The CounterCubit has an initial state of 0, and it defines two methods: increment and decrement.

The increment and decrement methods update the state of the Cubit by calling the emit method with passing in the new state.

The MyHomePage widget displays the current count in Text widget an it has

two button for increment or decrement the count. When one of these buttons is pressed, it calls the corresponding method on the CounterCubit, which updates the state and triggers a rebuild of the UI.

In summary, the Cubit pattern is a variation of the Bloc pattern that has a simpler API and a more intuitive way of representing state changes. Like the Bloc pattern, the Cubit pattern separates the business logic of an app from its user interface (UI) and allows developers to build reusable and testable business logic that can be shared across multiple UI elements.

In a Flutter app, a Cubit is implemented as a class that extends the Cubit class from the flutter_bloc package. The Cubit class takes a single generic type argument: the State type. The Cubit has an initialState and defines methods that update the state by calling the emit method and passing in the new state. The UI can rebuild itself based on the current state of the Cubit by using the context.bloc method to access the Cubit and by using the state property to get the current state.

I hope this help !!

Explanation of cubit in flutter with example