Flutter - StreamBuilder Widget

A StreamBuilder in Flutter is used to listen to a stream of data and rebuild its widget subtree whenever new data is emitted by the stream. It's commonly used for real-time updates, such as when working with streams of data from network requests, databases, or other asynchronous sources. In this article, we are going to see an example of a Streambuilder Widget by taking an Example.

Syntax of StreamBuilder

StreamBuilder<T>(
 stream: yourStream, // The stream to listen to
 initialData: initialData, // Optional initial data while waiting for the first event
 builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
 if (snapshot.connectionState == ConnectionState.waiting) {
 return YourLoadingWidget(); // Display a loading indicator while waiting for data
 } else if (snapshot.hasError) {
 return YourErrorWidget(error: snapshot.error); // Handle errors
 } else if (!snapshot.hasData) {
 return YourNoDataWidget(); // Handle the case when there's no data
 } else {
 return YourDataWidget(data: snapshot.data); // Display your UI with the data
 }
 },
)

Here we are going to see a simple example of a StreamBuilder in Flutter that listens to a stream of numbers and displays the latest number in real-time:

Required Tools

• To build this app, you need the following items installed on your machine:
• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementations

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'dart:async';
import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Step 5: Create NumberStreamPage Class

In this class we are going to Implement the StreamBuilder to display the numbers changes in real time.Here we are going to run a for loop from 0 to 9 and display the updates number by the help of StreamBuilder.Comments are added for better understanding.

StreamBuilder<int>(
 stream: _numberStreamController.stream,
 builder: (context, snapshot) {
 if (snapshot.connectionState == ConnectionState.waiting) {
 return CircularProgressIndicator(); // Display a loading indicator when waiting for data.
 } else if (snapshot.hasError) {
 return Text('Error: ${snapshot.error}'); // Display an error message if an error occurs.
 } else if (!snapshot.hasData) {
 return Text('No data available'); // Display a message when no data is available.
 } else {
 return Text(
 'Latest Number: ${snapshot.data}',
 style: TextStyle(fontSize: 24),
 ); // Display the latest number when data is available.
 }
 },
 ),

Here is the full Code of main.dart file

Output: