Flutter bloc is a great state management library for your dart/ flutter application that will help you to improve your application performance and speed.

flutter bloc tutorial

I won’t waste much of your time and let's get started with an example right away.

Currently, you are reading

  1. Flutter Bloc-state management library for Dart (1/5)
  2. Flutter Bloc-state management library for Dart (2/5)
  3. Flutter Bloc-state management library for Dart (3/5) <=
  4. We will start with bloc cubit first with an example first
  • If you reading this then I assume you already have flutter set up on your pc.
  • I encourage you to open your fav IDE and code along since it requires more practical work.
  • Also please add a plugin for flutter bloc in your IDE before continuing.

a) VS code plugin

b) Android Studio

It should look something like this in android studio

Alright, let's started with the simple counter application. Here is the code without using any cubit or bloc.

a) Without cubit

Output

Here we have just a few widgets i.e Text, SizedBox, Button, and Column. When we click on the button counter is increases and the widget is rebuilt. You can check the performance inspector below.

flutter rebuild widget on setState call

As you can see widgets are rebuilt every time you click on the button and call the setState function.

Okayyy.. now let's use flutter cubit to solve this issue as easiest as possible.

b) With cubit

  • Add flutter bloc in pubspec.yaml file
  • Create a cubic folder and create a cubic class. If you installed the plugin IDE will generate classes for you as below. I have created a class name Counter cubit class.

Note : Don’t get shocked with code written inside state and cubit class

These two files represent core Bloc files i.e all logic related to your app are supposed to write in here. That is how your UI will have only UI code, not logic code.

  • Now since we want to use this state in HomePage only we have to wrap HomePage with the BlocProvider widget which you will get from flutter bloc.
  • So we are telling your app that for HomePage use this state to manage counter state

Okay, now we can access the cubit state inside HomePage. When we click on the button instead of calling setState() we can call cubit and ask them to increase the counter value.

Note: you will still get error for cubit.increment() since cubit still doest know what is increment function for.

  • Now define increment function in cubit class as below

Since all logic is done here we have moved the count integer in a cubit.

When we click on the button it will call the increment function and emit count++ in form of CounterIncrement State(Which we will use later)

Notice: You will still get error on emit(CounterIncrement(count++)); since it does’t does’t know what is CounterIncrement is.

Now In counter_state.dart

You have defined one state that is CounterIncrement so that the Text widget can listen to this later when we click on the button to increase value.

Now your Text widget in HomePage should be wrapped in bloc builder so that it can listen to the CounterIncrement state and whenever you click on the button new state is released and the Text widget can display the value.

That is all now you have complete cubit running in your application. Here is the complete source code for main.dart.

Output:

Now, this time, if you check the performance inspector build function will not be called and your app will be much better in terms of performance, of course, you won't notice now since this is just a simple example.

flutter bloc cubit inspector

Thanks for taking your time for this shitty blog. please make sure to give a clap 👏 and leave some engagement. let me know in the comment section if you face any issues.

Check out more blogs from CodingWithTashi. Follow me on Twitter or Instagram or YouTube.

--

--

--

Native Android / Flutter Developer | Flutter enthusiast | Content Creator

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My First Android app!🤩

Debug app deeplink at launch time

Try Saving LiveData Coroutine State

Creating a UI Shield Strength indicator

WorkManager in Android

android workmanager

Can’t Uninstall Android Studio in Windows?

How to get Darker shadows on Android

Kotlin’s development pot holes found in 3 months

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodingWithTashi

CodingWithTashi

Native Android / Flutter Developer | Flutter enthusiast | Content Creator

More from Medium

Flutter Navigation with AutoRoute

What types of apps can be built with flutter?

Getting started with Contentful and Flutter

Using FadeInImage widget in Flutter