Explanation of hydrated bloc in flutter with example

The HydratedBloc is a subclass of the Bloc class from the flutter_bloc package that automatically persists the state of the Bloc to storage and restores the previous state when the app is restarted. This can be useful for scenarios where you want to preserve the state of the Bloc across app restarts, such as when the user closes and reopens the app or when the app is terminated by the operating system and then restarted.

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

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

void main() {
  runApp(
    HydratedBlocProvider(
      storage: HydratedStorage(),
      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 CounterBloc counterBloc = context.bloc<CounterBloc>();

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, count) {
          return Center(
            child: Text(
              '$count',
              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: () => counterBloc.add(CounterEvent.increment),
              child: Icon(Icons.add),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              onPressed: () => counterBloc.add(CounterEvent.decrement),
              child: Icon(Icons.remove),
            ),
          ),
        ],
      ),
    );
  }
}

enum CounterEvent { increment, decrement }

class CounterBloc extends HydratedBloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
      case CounterEvent.decrement:
        yield state - 1;
        break;
    }
  }

  @override
  int fromJson(Map<String, dynamic> json) => json['count'] as int;

  @override
  Map<String, int> toJson(int state) => {'count': state};
}

In this example, the CounterBloc is a HydratedBloc that manages the state of a simple counter.

The CounterBloc has an initialState of 0, and it defines two events: increment and decrement.

The mapEventToState method is called whenever an event is dispatched, and it returns a new state based on the event that was dispatched. The fromJson and toJson methods are used to Serialize and De-Serialize the state of the Bloc when it is persisted to storage.

In summary, the HydratedBloc is a subclass of the Bloc class from the flutter_bloc package that automatically persists the state of the Bloc to storage and restores the previous state when the app is restarted. This can be useful for scenarios where you want to preserve the state of the Bloc across app restarts, such as when the user closes and reopens the app or when the app is terminated by the operating system and then restarted.

In a Flutter app, a HydratedBloc is implemented as a class that extends the HydratedBloc class and overrides the initialState, mapEventToState, fromJson, and toJson methods. The initialState method defines the initial state of the Bloc, the mapEventToState method is called whenever an event is dispatched, and the fromJson and toJson methods are used to serialize and deserialize the state of the Bloc when it is persisted to storage.

To use a HydratedBloc in a Flutter app, you need to wrap your app with a HydratedBlocProvider widget and provide an instance of the HydratedStorage class.

I hope this help !!

Explanation of hydrated bloc in flutter with example