An introduction to one of the famous flutter package called bloc

Overview

BLoC Tutorial - Udemy

The full documentation on BLoC package is available in bloclibrary.dev. This video tutorial is also available on youtube. If you want, then instead of buying the Udemy tutorial, you can follow the youtube tutorial.

As developers we want to:

  • know what state our application is in at any point in time.
  • easily test every case to make sure our app is responding appropriately.
  • record every single user interaction in our application so that we can make data-driven decisions.
  • work as efficiently as possible and reuse components both within our application and across other applications.
  • have many developers seamlessly working within a single code base following the same patterns and conventions.
  • develop fast and reactive apps.

Bloc was designed to meet all of these needs and many more.

There are many state management solutions and deciding which one to use can be a daunting task. There is no one perfect state management solution!

Bloc was designed with three core values in mind:

  1. Simple: Easy to understand & can be used by developers with varying skill levels.
  2. Powerful: Help make amazing, complex applications by composing them of smaller components.
  3. Testable: Easily test every aspect of an application so that we can iterate with confidence.

Overall, Bloc attempts to make state changes predictable by regulating when a state change can occur and enforcing a single way to change state throughout an entire application.

BLoC Core Concept

  1. Stream:
    It is the foundation of BLoC. The stream is a river , which transport some data, on a boat, from the sender to the receiver. The transported data is asynchronous.
  2. Cubit:
    A cubit is the minimal version of a BLoC. BLoC actually extends cubit.
  3. Bloc:
    BLoC is the big brain of the project. Where as cubit is used to optimize the functionality of the project.

**Note: Start with a cubit. If you see the necessity, then modify your cubit into BLoC.

Flutter BLoC Concept

Some vital Flutter concepts to get going (widget, widget tree).

  1. BlocProvider + CounterApp implementation.
  2. BlocBuilder + CounterApp implementation.
  3. BlocListener + CounterApp implementation.
  4. BlocConsumer + CounterApp implementation.
  5. RepositoryProvider
  6. MultiBlocListener, MultiBlocProvider, MultiRepositoryProvider

`RepositoryProvider is a class. Which has the main function which makes flutter communicate with outer data layer i.e. internet, APIs, databases, etc`

BlocBuilder & BlocListener can be combined together to from BlocConsumer

BLoC Architecture

Like every application, BLoC also follows a specific file pattern. The "Business logic" layer is separated from the "Presentation" and from the "Data" layers.

Complete BLoC architecture


Weather app architecture

You might also like...

State Persistence - Persist state across app launches. By default this library store state as a local JSON file called `data.json` in the applications data directory. Maintainer: @slightfoot

State Persistence Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications dat

Sep 28, 2022

Just a simple interface showing a diamond, an imitation to that old application called I am rich .

i_am_rich A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Dec 29, 2021

Here is an application project that displays a list of products from the Elevenia API called STORE.

Here is an application project that displays a list of products from the Elevenia API called STORE.

Here is an application project that displays a list of products from the Elevenia API called STORE.

May 18, 2022

A group of overlapping round avatars are called face piles, a face pile is a series of overlapping avatar images that come and go as users join and leave a given group.

A group of overlapping round avatars are called face piles, a face pile is a series of overlapping avatar images that come and go as users join and leave a given group.

Flutter Face Pile A group of overlapping round avatars are called face piles. A face pile is a series of overlapping avatar images that come and go as

Sep 22, 2022

A smartphone application called Easy Job goal is to make easier for businesses to find people who meet their standards as well as for job seekers to search for and choose from available positions .

Easy_Jobs 19SW54(MAD-Project) A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

Nov 6, 2022

Google one tap sign in - Flutter Google One Tap Sign In (Android)

Google one tap sign in - Flutter Google One Tap Sign In (Android)

Google One Tap Sign In Google One Tap Sign In (Android) A Flutter Plugin for Goo

Nov 23, 2022

One Dungeon is a ​1-Bit-style platformer game that consists of one level

One Dungeon is a ​1-Bit-style platformer game that consists of one level

One Dungeon is a ​1-Bit-style platformer game that consists of one level. It developed during the Midyear 2022 Flame Game Jam.

Sep 21, 2022

Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls into your app with only a few lines of code.

Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls into your app with only a few lines of code.

Call Kit (ZegoUIKitPrebuiltCall) Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls

Dec 26, 2022
Owner
Md. Siam
Take care of yourself, you are your most valuable asset.
Md. Siam
MQuote provides you +700 Motivational & Inspirational quotes by famous authors, celebrities. Powered by Flutter

MQuote MQuote provides you +700 Motivational & Inspirational quotes by famous authors, celebrities. you can select your favorite quotes, you can share

Aybars 22 Jan 27, 2022
A showcase app for the Flutter SDK. Wonderous will educate and entertain as you uncover information about some of the most famous structures in the world.

Wonderous Navigate the intersection of history, art, and culture. Wonderous will educate and entertain as you uncover information about some of the mo

gskinner team 2.3k Dec 29, 2022
Introduction to flutter app final input

TASK CREATOR Introduction to Flutter URSB Webinar Topics What is flutter Why Flutter ? Flutter architecture Advantage and Disadvantage Widgets State A

Nehry Dedoro 2 Aug 28, 2022
Integrationtestapp - Introduction and example on Flutter Integration Testing

integrationtestapp Flutter Project with integration test example. Setup integrat

null 0 Feb 11, 2022
Introduction to Dart for GDSC, 2021. Cairo University.

Introduction to Dart Cairo University GDSC, 2021 Note: Most of the examples here are from the dart docs. Roadmap Data Types Conditions Loops Null Safe

Michael Soliman 3 Nov 1, 2021
Add easily to your app an introduction screen to provide informations to new users

IntroductionScreen Introduction screen allow you to have a screen at launcher for example, where you can explain your app. This Widget is very customi

Jean-Charles Moussé 484 Jan 6, 2023
A splash view is a short introduction to an application shown when it is launched.

A splash view is a short introduction to an application shown when it is launched. In the splash view, basic introductory information, such as the company logo, content, etc. is displayed at the moment the application load.

Rahul Chouhan 3 Sep 3, 2022
An introduction slider has some screens that can use to describe your application.

An introduction slider has some screens that can use to describe your application. You can describe your application's title, description, logo, etc. It comes with several features.

Rahul Chouhan 6 Dec 7, 2022
just a flutter project called working_project that projects the project on the working.

Flutter & Firebase Realtime Apps This is a Shipper app that can be used as a shipper hooker using Flutter & Firebase. Go drawsql.app/c-5/diagrams/work

DokuroGitHub 0 Jan 1, 2022
Return a Stream that emits null and done event when didChangeDependencies is called for the first time.

did_change_dependencies Author: Petrus Nguyễn Thái Học Return a Stream that emits null and done event when State.didChangeDependencies is called for t

Petrus Nguyễn Thái Học 5 Nov 9, 2022