Bloc

<p align="center"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/logos/bloc.png" height="100" alt="Bloc" /> </p> <p align="center"> <a href="https://github.com/felangel/bloc/actions"><img src="https://github.com/felangel/bloc/actions/workflows/main.yaml/badge.svg" alt="build"></a> <a href="https://codecov.io/gh/felangel/bloc"><img src="https://codecov.io/gh/felangel/Bloc/branch/master/graph/badge.svg" alt="codecov"></a> <a href="https://github.com/felangel/bloc"><img src="https://img.shields.io/github/stars/felangel/bloc.svg?style=flat&logo=github&colorB=deeppink&label=stars" alt="Star on Github"></a> <a href="https://pub.dev/packages/bloc_lint"><img src="https://img.shields.io/badge/style-bloc_lint-20FFE4.svg" alt="style: bloc lint"></a> <a href="https://flutter.dev/docs/development/data-and-backend/state-mgmt/options#bloc--rx"><img src="https://img.shields.io/badge/flutter-website-deepskyblue.svg" alt="Flutter Website"></a> <a href="https://github.com/Solido/awesome-flutter#standard"><img src="https://img.shields.io/badge/awesome-flutter-blue.svg?longCache=true" alt="Awesome Flutter"></a> <a href="http://fluttersamples.com"><img src="https://img.shields.io/badge/flutter-samples-teal.svg?longCache=true" alt="Flutter Samples"></a> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-purple.svg" alt="License: MIT"></a> <a href="https://discord.gg/bloc"><img src="https://img.shields.io/discord/649708778631200778.svg?logo=discord&color=blue" alt="Discord"></a> <a href="https://github.com/felangel/bloc"><img src="https://tinyurl.com/bloc-library" alt="Bloc Library"></a> </p>

---

A predictable state management library that helps implement the BLoC design pattern.

| Package | Pub | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | | angular_bloc | | | bloc | | | bloc_concurrency | | | bloc_lint | | | bloc_test | | | bloc_tools | | | flutter_bloc | | | hydrated_bloc | | | replay_bloc | |

---

Sponsors

Our top sponsors are shown below! [Become a Sponsor]

<table style="background-color: white; border: 1px solid black"> <tbody> <tr> <td align="center" style="border: 1px solid black"> <a href="https://shorebird.dev"><img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/sponsors/shorebird.png" width="225"/></a> </td> <td align="center" style="border: 1px solid black"> <a href="https://getstream.io/chat/flutter/tutorial/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_FlutterChat&utm_term=bloc"><img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/sponsors/stream.png" width="225"/></a> </td> <td align="center" style="border: 1px solid black"> <a href="https://rettelgame.com/"><img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/sponsors/rettel.png" width="225"/></a> </td> </tr> </tbody> </table>

---

Overview

<img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/diagrams/bloc_architecture.png" width="500" alt="Bloc Architecture"></img>

The goal of this library is to make it easy to separate presentation from business logic, facilitating testability and reusability.

Documentation

• Official Documentation
• Angular Bloc Package
• Bloc Package
• Bloc Concurrency Package
• Bloc Lint Package
• Bloc Test Package
• Bloc Tools Package
• Flutter Bloc Package
• Hydrated Bloc Package
• Replay Bloc Package

Migration

• Migration Guide

Examples

<div style="text-align: center"> <table> <tr> <td style="text-align: center"> <a href="https://bloclibrary.dev/tutorials/flutter-counter"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/examples/flutter_counter.gif" width="200"/> </a> </td> <td style="text-align: center"> <a href="https://bloclibrary.dev/tutorials/flutter-infinite-list"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/examples/flutter_infinite_list.gif" width="200"/> </a> </td> <td style="text-align: center"> <a href="https://bloclibrary.dev/tutorials/flutter-login"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/examples/flutter_firebase_login.gif" width="200" /> </a> </td> </tr> <tr> <td style="text-align: center"> <a href="https://bloclibrary.dev/tutorials/github-search"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/examples/flutter_github_search.gif" width="200"/> </a> </td> <td style="text-align: center"> <a href="https://bloclibrary.dev/tutorials/flutter-weather"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/examples/flutter_weather.gif" width="200"/> </a> </td> <td style="text-align: center"> <a href="https://bloclibrary.dev/tutorials/flutter-todos"> <img src="https://raw.githubusercontent.com/felangel/bloc/master/assets/examples/flutter_todos.gif" width="200"/> </a> </td> </tr> </table> </div>

Dart

• Counter - an example of how to create a CounterBloc (pure dart).

Flutter

• Counter - an example of how to create a CounterBloc to implement the classic Flutter Counter app.
• Form Validation - an example of how to use the bloc and flutter_bloc packages to implement form validation.
• Bloc with Stream - an example of how to hook up a bloc to a Stream and update the UI in response to data from the Stream.
• Complex List - an example of how to manage a list of items and asynchronously delete items one at a time using bloc and flutter_bloc.
• Infinite List - an example of how to use the bloc and flutter_bloc packages to implement an infinite scrolling list.
• Login Flow - an example of how to use the bloc and flutter_bloc packages to implement a Login Flow.
• Firebase Login - an example of how to use the bloc and flutter_bloc packages to implement login via Firebase.
• Github Search - an examp