Flutterexperts

A flutter bloc state management series that will walk you through from all the basics of streams to advance state management tools like flutter_bloc/bloc package

---

Let’s start by understanding what we mean by state management and why should we care about it in the first place.

What Exactly Is State management ?

In simple words, state means data or the current information the user can see or manipulate.

For eg: Interface controls such as text fields, OK buttons, radio buttons, etc. To maintain these state of data like weather a button is pressed or not what is the current text in the text field or is a toggle button on or off, These data which user generally see or interacts with or generates on some event is called the state and the term used for maintaining all these information(state) is called state management.

The problem :

State management can become very messy when the application grows, simple tools like setState in flutter can’t be the solution for managing large changes at once and tools like inherited widget can create a lot of boilerplate code.

The Solution :

To overcome the above problem we can simply use tools like flutter_bloc/bloc these packages are created by the community are pretty useful for reducing boilerplate code and can be very easy to implement.

Before going deep into the flutter_bloc package we need to make our basics clear these basics includes :

• :: streams
• :: cubit
• :: bloc

Streams :

A stream is a sequence of asynchronous data. Streams are just like water hose which have a sink and a drain, Which we can use to provide and retrieve data from streams. To fully understand the concept of bloc we will first need to understand the core features and basic application of streams in Dart.

As we know the basic definition of streams lets generate our own stream using the yield keyword.

In the above example, we have a function getRandomNumberStream this function is present in “lib\streamGenerators.dart” (It’s better to clone the repo and take a look at the structure of the program) which output streams we have specified that by using async*. Then we have a Future.delayed() which delays our execution for the first run for 1000 ms and then 500 ms for every other subsequent execution. Then we output(yield) the value.

What yield does it basically output the data in the form of a stream, So this function is going to be our go-to for all our need for streams in this first series.

Now let me brief about all the basic functions that are available with streams.

• .map: .map helps us to map the event that we are getting from the stream by passing them to a function. ex

StreamGenerators.getRandomNumberStream(10).map((event) => "This event --$event-- is mapped");

op:
This event --$0-- is mapped
This event --$1-- is mapped
This event --$2-- is mapped
This event --$3-- is mapped
This event --$4-- is mapped

• .take: .take will only take the first N values and drain the rest of the values. ex

StreamGenerators.getRandomNumberStream(10).take(5)
        .map((event) => event.toString() + " .take(5)");

op: 
0 .take(5)
1 .take(5)
2 .take(5)
3 .take(5)
4 .take(5)

• .where: .where this can be helpful in case we want to filter our stream on the basis of some condition. ex:

StreamGenerators.getRandomNumberStream(20)
        .where((event) =>
            event % 2 !=
            0) 
        .map((event) =>
            "$event : filtering stream by eleminating element which are  divisible of 2 ")

op:
1:filtering stream by eleminating element which are  divisible of 2
3:filtering stream by eleminating element which are  divisible of 2
5:filtering stream by eleminating element which are  divisible of 2
7:filtering stream by eleminating element which are  divisible of 2
9:filtering stream by eleminating element which are  divisible of 2
11:filtering stream by eleminating element which are  divisible of 2
13:filtering stream by eleminating element which are  divisible of 2
15:filtering stream by eleminating element which are  divisible of 2
17:filtering stream by eleminating element which are  divisible of 2
19:filtering stream by eleminating element which are  divisible of 2

There are some other methods which can be useful like expand, transform, etc. You can check out other methods at https://api.dart.dev/stable/2.10.2/dart-async/Stream-class.html.

That’s enough for basics lets tale a look at stream subscription, Stream sink, and stream function.

Stream Subscription: Stream subscription is just like handles to a stream which we can use to control the stream behavior ie. when to stop when to resume and when to cancel. You can check out the StreamSubscription example in the git repo. Let’s take a brief look at stream subscription.

StreamSubscription streamSubscription =
        StreamGenerators.getRandomNumberStream(20).listen((event) { }

//accessing methods of stream
streamSubscription.pause();
streamSubscription.resume();
treamSubscription.cancel();

In the above code, we are first subscribing to a stream using the listen method. Then we are accessing the methods of stream subscription. These methods are pretty self-explanatory.

sink: are the opening of the stream where we can input data that we want our stream to consume. Let’s take a look at an example.

final _counterStateController = StreamController<int>();

StreamSink<int> get _inCounter => _counterStateController.sink;
Stream<int> get counter => _counterStateController.stream;

In the above example, we have created a StreamController and accessing its sink and stream functionality using the StreamController object. You can check more about streams and basics of how bloc implements it for its use in the below video though we will be looking at the community package for bloc like flutter_bloc in the next article.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.