Continuing from our basic introduction to Cubits

Cubit in a UI

Important Links

Bloc Documentation

Bloc Overrides Documentation

We build a Bloc with a class and use it in a UI/

To start with we create a class that extends BlocObserver

class VsjBlocObserver extends BlocObserver {}

Pass it as a BlocObserver in main

void main() {
BlocOverrides.runZoned(
() {
return runApp(const VsjApp());
},
blocObserver: VsjBlocObserver(),
);
}

Create a class that contains the state data. In our case it is a minimal state.

class BankAccount {
int nooftransactions = 0;
int prevnooftransactions = 0;
int balance = 0;
@override
String toString() {
return "Balance=$balance, Transactions=$nooftransactions";
}
@override
bool operator ==(Object other) {
if (other is! BankAccount) return false;
BankAccount ac = other;
print(prevnooftransactions == ac.nooftransactions);
return prevnooftransactions == ac.nooftransactions;
}
@override
int get hashCode => balance.hashCode ^ nooftransactions.hashCode;
}

Bloc is Event based so we will create an abstract class and 2 classes based on that

abstract class BankAccountEvent {}
/// Notifies bloc to increment balance.
class BankDepositPressed extends BankAccountEvent {}
/// Notifies bloc to decrement balance.
class BankWithdrawPressed extends BankAccountEvent {}

Varanasi Software Junction: Simple Bloc Demo.

We make a class for the purpose.

Its a simple class with two variables nooftransctions and balance. We have 2 methods deposit and withdraw The deposit method adds 10 to the state and the withdraw removes 5. Both of them increment the nooftranasctions by 1.





class BankAccount {
  int nooftransactions = 0;
  int prevnooftransactions = 0;
  int balance = 0;
  @override
  String toString() {
    return "Balance=$balance, Transactions=$nooftransactions";
  }

  @override
  bool operator ==(Object other) {
    if (other is! BankAccount) return false;
    BankAccount ac = other;
    print(prevnooftransactions == ac.nooftransactions);
    return prevnooftransactions == ac.nooftransactions;
  }

  @override
  int get hashCode => balance.hashCode ^ nooftransactions.hashCode;
}

The state class must show some difference from the previous object so we redefine the == operator. We have kept two variables previousnooftransactions and nooftransactions for the purpose.

Here is the full code





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

void main() {
  BlocOverrides.runZoned(
    () {
      return runApp(const VsjApp());
    },
    blocObserver: VsjBlocObserver(),
  );
}

class VsjBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print(change);
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print(transition);
  }
}

class VsjApp extends StatelessWidget {
  const VsjApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => BankBloc(),
      child:
          const MaterialApp(debugShowCheckedModeBanner: false, home: VsjBank()),
    );
  }
}

class VsjBank extends StatelessWidget {
  const VsjBank({Key? key}) : super(key: key);
  static final BankAccount account = BankAccount();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('VSJ Bloc Demo'),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: BlocBuilder<BankBloc, BankAccount>(
          builder: (context, account) {
            return Text('$account',
                style: const TextStyle(
                    color: Colors.blueAccent, fontWeight: FontWeight.bold));
          },
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          ElevatedButton(
            child: const Text("Deposit   "),
            onPressed: () {
              context.read<BankBloc>().add(BankDepositPressed());
            },
          ),
          const SizedBox(height: 4),
          ElevatedButton(
            child: const Text("Withdraw"),
            onPressed: () {
              context.read<BankBloc>().add(BankWithdrawPressed());
            },
          ),
        ],
      ),
    );
  }
}

abstract class BankAccountEvent {}

/// Notifies bloc to increment balance.
class BankDepositPressed extends BankAccountEvent {}

/// Notifies bloc to decrement balance.
class BankWithdrawPressed extends BankAccountEvent {}

class BankBloc extends Bloc<BankAccountEvent, BankAccount> {
  BankBloc() : super(VsjBank.account) {
    on<BankDepositPressed>((event, emit) {
      state.balance += 10;
      state.prevnooftransactions = state.nooftransactions;
      state.nooftransactions += 1;
      emit(state);
    });

    on<BankWithdrawPressed>((event, emit) {
      state.balance -= 5;
      state.prevnooftransactions = state.nooftransactions;
      state.nooftransactions += 1;
      emit(state);
    });
  }
}

class BankAccount {
  int nooftransactions = 0;
  int prevnooftransactions = 0;
  int balance = 0;
  @override
  String toString() {
    return "Balance=$balance, Transactions=$nooftransactions";
  }

  @override
  bool operator ==(Object other) {
    if (other is! BankAccount) return false;
    BankAccount ac = other;
    print(prevnooftransactions == ac.nooftransactions);
    return prevnooftransactions == ac.nooftransactions;
  }

  @override
  int get hashCode => balance.hashCode ^ nooftransactions.hashCode;
}