A counter app to learn Flutter Bloc Concepts

Overview

counter

A counter app to learn Flutter Bloc Concepts

Flutter Bloc Crash Course Short Notes

For every interaction, the app should be in a different state. Bloc helps in managing these states

Advantages

  1. Understand easily what's happening inside your app
  2. More structured code, easier to maintain and test
  3. Know and understand every state of your app
  4. Work on a single, stable, popular and effective Bloc codebase

Bloc core concepts Async function- generates a synchronous data Await- wait for a process to finish Listen- wait for incoming data

Cubit is a minimal version of a Bloc. Bloc extends cubit. Cubit is a special Kind of a stream component based on some functions which are called from the UI. The functions rebuild the UI by emitting different states on a stream. Cubic functions are not part of a stream. They are simply a pre-baked list of what the Kindle can do. A stream of states is the only stream in cubit. Bloc emits a stream of states. It also receives a stream of events. When to use Bloc/Cubit? There should be a Bloc or cubit component for every feature of your app.

Flutter Bloc Components

Every concept is a widget. Widgets are classes which have their own attributes and constructors. Bloc will provide a single instance of a Bloc to the subtree below. BlocProvider widget creates and provides a Bloc to all its children. It is also known as a dependency injection widget. It takes the build context as an argument and returns only one instance of the Bloc. Context is the context in which a specific widget is built. By default, BlocProvider creates the Bloc lazily. To override it, set the lazy attribute to false.

BlocProvider handles the closing part of Blocs automatically.

BlocProvider.value- Provides the only instance of Bloc a to the new portion of the tree.

Since the only instance of blocA was created where the BlocProvider, it will get automatically closed by the BlocProvider. Providing it to the second page (using blocprovider.value) won't close the only instance of the Bloc on the second page gets destroyed. This is because the instance may still be needed in the page above, in the ancestor tree. However, the Instance will be closed when needed because of the way it was created in the first place- by using BlocProvider

You can access the current state of a cubit by using the state keyword.

Bloc Builder

A widget that helps rebuilding the you are based on the Bloc state changes. Reveals the UI every single time A new state is emitted. Rebuilding a large chunk of the UI may require a lot of time to compute; that's why you should rebuild only the widgets being changed. The Builder function can be called multiple times due to how the Flutter engine works. Return widgets based on the bloc’s State. The Builder function must be a pure function. A function is a function where the return value depends only on the function’s parameters and nothing more.

buildwhen(previousstate, state)

BlocProvider- creates and provides the only instance of a bloc to the subtree. BlocBuilder- rebuilds the UI for every new state coming from the bloc BlocListener- this listener function is called only once per state. Optional listenWhen function BlocConsumer- combines both BlocBuilder and BlocListener into a single widget. RepositoryProvider- provides a unique instance of a repository MultiBlocProvider, MultiBlocLister,MultiRepositoryProvider

Bloc Architecture

Bloc is a design pattern, a state management library and an architectural pattern. Almost all apps retrieve data from the internet. We need to link our bloc-based Flutter app with the outer data layer. The data layer consists of repositories, data providers and the models. The model data shouldn’t be the same as the data provided to the weather API. The data provider is an API for your app. The different methods request data straight from the internet. Blocs can communicate with each other.

Bloc Testing

Pros vs Cons- deciding whether its worth choosing testing for its advantages over its disadvantages. Learn and understand the structure. In dart, two instances of the same class aren’t equal, even though they are the same. Use the equitable library. Pub run test- runs tests.

You might also like...

Learn how to incorporate Firebase into our Flutter apps

Learn how to incorporate Firebase into our Flutter apps

Flash Chat ⚡️ Our Goal The objective of this tutorial is to learn how to incorporate Firebase into our Flutter apps. We'll be using Firebase Cloud Fir

Oct 27, 2021

The objective of this tutorial is to learn about asynchronous programming in Dart.

The objective of this tutorial is to learn about asynchronous programming in Dart.

The objective of this tutorial is to learn about asynchronous programming in Dart. We'll look at how to carry out time consuming tasks such as getting device location and networking to get data from the internet.

Oct 5, 2021

Flutter Coronavirus covid19 statistic App using Flutter widgets + bloc + rest api

Flutter Coronavirus covid19 statistic App using Flutter widgets + bloc + rest api

Intro Corona virus ( covid 19 ) Statistic App on Flutter. The tech used: Flutter widgets + Flutter Bloc / Cubit + Rest Api Check the screenshot : P.S

Mar 13, 2022

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

Jul 14, 2022

News App - A News Flutter application using Bloc, Dio, and shared preferences

News App - A News Flutter application using Bloc, Dio, and shared preferences

News App A new Flutter application. Getting Started Flutter application using Bl

Nov 14, 2022

A Completed Functional Flutter App (BLoC + Json API + Unit Test + Azure Active Directory OAuth + Access Dynamic CRM Entitis)

 A Completed Functional Flutter App (BLoC + Json API + Unit Test + Azure Active Directory OAuth + Access Dynamic CRM Entitis)

A Completed Functional Flutter App (BLoC + Json API + Unit Test + Azure Active Directory OAuth + Access Dynamic CRM Entitis)A Completed Functional Flutter App (BLoC + Json API + Unit Test + Azure Active Directory OAuth + Access Dynamic CRM Entitis)

Dec 23, 2022

A social media app built using flutter, firebase and bloc.

Kasassy Generated by the Very Good CLI 🤖 A Very Good Project created by Very Good CLI. Getting Started 🚀 This project contains 3 flavors: developmen

Mar 10, 2022

Flutter Clean Architecture app proposal: bloc + injectable + rxdart

Flutter Clean Architecture app proposal: bloc + injectable + rxdart

Flutter Clean Architecture app proposal: bloc + injectable + rxdart (with the Repository pattern and SOLID principles)

Jan 1, 2023

Flutter Login App created with Bloc/Cubit

Flutter Login App created with Bloc/Cubit

cubit_login A Flutter project which is created by Cubit/BLoC and Firebase. The differ from the other bloc login projects, this project has social logi

Dec 28, 2022
Owner
Imali Susan
Software Developer
Imali Susan
Counter - A simple flutter app to count how many people are in a store/building

People counter made with Flutter Summary About the app Preview of the finished a

Luan Silva da Silva 1 Feb 12, 2022
Instead of a simple counter app, the @FlutterDev team can provide a simple game like the one below.

Instead of a simple counter app, the @FlutterDev team can provide a simple game like the one below. Thanks to the @rive_app team for their easy-to-use animation kit.

Md. Siam 10 Oct 27, 2022
Flutter Login Page Bloc Pattern App Flutter Login Page Bloc Pattern App

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

Pawan Kumar 99 Oct 20, 2022
A set of counter apps made for #FlutterCounterChallenge2020

flutter_counter_challenge_2020 A set of counter apps made for #FlutterCounterChallenge2020. Run flutter create . inside the repository after cloning i

Romain Rastel 178 Dec 30, 2022
3 different demos showing how to use bloc concurrency, before and after the Bloc 7.2.0 update.

Bloc Concurrency Demos 3 different scenarios demonstrating how to structure blocs to take advantage of concurrent event processing in Bloc 7.2/8.0. Ea

Very Good Ventures 64 Nov 30, 2022
Learn how to integrate horizontal & vertical dividers for the widgets in your Flutter app.

Divider - Horizontal & Vertical - Deep Dive - Flutter Learn how to integrate horizontal & vertical dividers for the widgets in your Flutter app. ⚡  So

Johannes Milke 4 Dec 19, 2020
A flutter quiz app that helps you learn about the City of Munich

MucQuiz MucQuiz is a quiz app that helps you learn about the City of Munich. It is a submission for the City of Munich challenge at hackaTUM 2021. Scr

Robin Holzinger 10 Sep 6, 2022
A simple app for studying the japanese vocabulary you will learn in your japanese learning journey based on cards with meaning, pronunciation and kanji.

KanPractice A simple app for studying the japanese vocabulary you will learn in your japanese learning journey based on cards with meaning, pronunciat

Gabriel García 23 Jan 3, 2023
Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Johannes Milke 124 Jan 4, 2023