DEV Community

Arjun Kohli
Arjun Kohli

Posted on

Sneak peak into Flutter state management #2

Hello awesome people, this is the part 2 on "Sneak peak into Flutter state management #1"
Here we will get an intro to Stream,StreamBuilder,ValueNotifier,ValueListenableBuilder and so on.

1)Stream in Flutter
It is similar to what is ‘Observables’ in javascript , it emits a sequence of events to its listener.Each event is either a data event, also called an element of the stream, or an error event, which is a notification that something has failed. When a stream has emitted all its events, a single "done" event will notify the listener that the end has been reached.

Stream<int> generateNumbers = (() async* {
 await Future<void>.delayed(Duration(seconds: 2));
 for (int i = 1; i <= 10; i++) {
   await Future<void>.delayed(Duration(seconds: 1));
   yield i;
 }
})();

Enter fullscreen mode Exit fullscreen mode

2) StreamBuilder in Flutter
Steambuilder accepts two arguments one being the stream to which it listens to(subscribes to) and another being the builder which rebuilds the widget in the widget tree when a new value is emitted into the stream.

StreamBuilder<int>(
  stream: generateNumbers,
  builder: (
      BuildContext context,
      AsyncSnapshot<int> snapshot,
      ) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else {
      if (snapshot.hasError) {
        return const Text('Error');
      } else if (snapshot.hasData) {
        return Text(
            snapshot.data.toString(),
            style: const TextStyle(color: Colors.red, fontSize: 40)
        );
      }  },
),


Enter fullscreen mode Exit fullscreen mode

3)ValueNotifier in Flutter
A ValueNotifier can hold a single value. The value itself can be of any type. It can be an int, a String, a bool or your own data type.Using a ValueNotifier improves the performance of Flutter app as it can help to reduce the number times a widget gets rebuilt. In contrast to the setState method which rebuilds the entire widget tree of a StatefulWidget, a ValueNotitier performs a lot better.

ValueNotifier<bool> _textHasErrorNotifier = ValueNotifier(false);

Enter fullscreen mode Exit fullscreen mode

4)ValueListenableBuilder in Flutter
A ValueListenableBuilder work by accepting ValueNotifier. It listens to the value emitted by ValueNotifier and rebuilds the widget tree following it whenever a new value is emitted.
It takes in two required arguments ,valueListenable and builder which accepts the valueNotifier and rebuilds the widget respectively.

ValueListenableBuilder(
valueListenable: _textHasErrorNotifier,
builder: (BuildContext context, bool hasError, Widget child) {
   return TextField(
     onChanged: _updateErrorText,
      decoration: InputDecoration(
        fillColor: Colors.grey[100],
        filled: true,
        errorText: hasError ? 'Invalid value entered...' : null,
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.grey,
          ),
          borderRadius: BorderRadius.circular(6.0),
        ),

Enter fullscreen mode Exit fullscreen mode

*5)Behaviour subject in flutter
*

Unlike normal streams in flutter behaviour subject can be used if the user wants to listen to multiple subscribers subscribed to a single stream.
BehaviourSubject can be used as a broadcast stream for multiple subscribers.

final subject = BehaviorSubject<int>.seeded(1);

subject.stream.listen(print); // prints 1
subject.stream.listen(print); // prints 1
subject.stream.listen(print); // prints 1

Enter fullscreen mode Exit fullscreen mode

Hope this article helped you understand the basics of flutter state management , do share with your circle and don't forget to like this article..Have a great development day ahead.

Top comments (0)