Dive into StreamBuilder in Flutter

In this article, we will be Diving into StreamBuilder In Flutter. We will implement a demo program through which you will get to know how to use StreamBuilder in your flutter applications.

First,Let me ask, Why use StreamBuilder? Because, we can get rid of calling setState, which rebuilds the entire descendants of widget tree and hence, affecting our app performance.

Flow of Article:

Basic Terminologies

Understanding the Constructor

Implementation

Conclusion

Basic Terminologies-

• Stream: A Stream provides a way to receive a sequence of events or data. It is a flow of input data or events which the builder listens to and builds upon these events or data.
• Sink: A Sink is a generic destination for data. Adding data or events to a Sink, funnels that data into a connected stream.
• StreamBuilder: StreamBuilder is a widget that builds itself based on the latest snapshot of interaction with a stream.

Understanding the Constructor:

In order to use StreamBuilder, you need to call below given constructor,

const StreamBuilder({
Key? key,
Stream<T>? stream,
T? initialData,
required AsyncWidgetBuilder<T> builder,
})

First, you have to make a Stream and pass it in the constructor. Then you have to pass the required parameter AsyncWidgetBuilder, which is basically a builder which constructs a widget depending on the snapshots of stream data.

Let’s go through the constructor’s parameter for better understanding:-

• Key? Key: Key is an identifier for Widgets. It is used to control how a widget interacts with another widget.
• Stream<T>? stream: Stream’s snapshot is taken and used by the builder.
• T? initialData: The data of initial Snapshot.
• required AsyncWidgetBuilder<T> builder: It builds the events and widgets using build procedure.

Step by Step Implementation:

Let’s first initialize some values and implement basic structure.

double amountOfMoney = 300000;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
body: ListView(
children: [
buildStreamBuilder(),
]));
}

In the above code, we initialized double amountOfMoney = 300000 and passed buildStreamBuilder() it’s a Streambuilder but implemented outside BuildContext to make our code cleaner. Don’t worry? You will get to know about it further.

Now, create a Stream:

Stream<double> getAmountOfMoney() => Stream<double>.periodic(
        Duration(seconds: 1),
        (count) => (amountOfMoney + count * 5),
      );
}

The above code returns a stream for incrementing the previously initialised amountOfMoney.

Let’s create a StreamBuilder named as buildStreamBuilder():

StreamBuilder<double> buildStreamBuilder() => StreamBuilder<double>(
        initialData: amountOfMoney,
        stream: getAmountOfMoney(),
        //builder:......,
      );

So here we are passing initialData: amountOfMoney ,which we initialized previously. In the stream parameter we are passing getAmountOfMoney() as stream: getAmountOfMoney() . The snapshot of the stream will be used in the builder parameter, which we will use to create a widget.

Finally we are going inside builder() to show the snapshot data inside a card with some styling,below is the code:-

builder: (context, snapshot) {
          final money = snapshot.data!.toStringAsFixed(2);
          return Padding(
              padding: EdgeInsets.all(16),
              child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20)),
                  child: Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Column(children: [
                        ListTile(
                            leading:Icon(Icons.fiber_manual_record),
                            title: Transform.translate(
                                offset: Offset(-20, 5),
                                child: Text("Using StreamBuilder we are changing the data using streams.",
                                    style: TextStyle(
                                      fontSize: 20,
                                    )))),
                        SizedBox(
                          height: 10,
                        ),
                        Row(children: [
                          Icon(
                            Icons.attach_money,
                            size: 50,
                            color: Colors.blue,
                          ),
                          SizedBox(
                            width: 30,
                          ),
                          Text(
                            '\$' + money,
                            style: TextStyle(fontSize: 25,                  
                                       fontWeight: FontWeight.w600),
              )
             ])
      ]))));
      },

So, using above code we can build a demo application, whose screen video is given below:

Conclusion:

In this article, we got a glimpse of the basic structure of StreamBuilder and Streams in Flutter . You can tweak the code according to your wish. This was a small introduction of Streambuilder from my side. I would really appreciate it if you explore more around Streams and their usability.

❤ ❤ Thanks for reading this article ❤❤