Open In App

Flutter - StreamBuilder Widget

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
Report

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.

Dart 
void main() {
  runApp(MyApp());
}

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.

Dart 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      title: 'StreamBuilder Example',
      home: NumberStreamPage(),
    );
  }
}

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.
            }
          },
        ),
Dart 
class _NumberStreamPageState extends State<NumberStreamPage> {
  late StreamController<int> _numberStreamController;

  @override
  void initState() {
    super.initState();

    // Create a stream controller and add numbers to the stream.
    _numberStreamController = StreamController<int>();
    _startAddingNumbers(); // Start adding numbers to the stream.
  }

  void _startAddingNumbers() async {
    for (int i = 0; i < 10; i++) {
      await Future.delayed(Duration(seconds: 2)); // Delay for 2 seconds.
      _numberStreamController.sink.add(i); // Add the number to the stream.
    }
  }

  @override
  void dispose() {
    _numberStreamController.close(); // Close the stream when disposing.
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StreamBuilder Example'),
      ),
      body: Center(
        child: 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

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Remove the debug banner
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color to green
      ),
      title: 'StreamBuilder Example',
      home: NumberStreamPage(),
    );
  }
}

class NumberStreamPage extends StatefulWidget {
  @override
  _NumberStreamPageState createState() => _NumberStreamPageState();
}

class _NumberStreamPageState extends State<NumberStreamPage> {
  late StreamController<int> _numberStreamController;

  @override
  void initState() {
    super.initState();

    // Create a stream controller and add numbers to the stream.
    _numberStreamController = StreamController<int>();
    _startAddingNumbers(); // Start adding numbers to the stream.
  }

  void _startAddingNumbers() async {
    for (int i = 0; i < 10; i++) {
      await Future.delayed(Duration(seconds: 2)); // Delay for 2 seconds.
      _numberStreamController.sink.add(i); // Add the number to the stream.
    }
  }

  @override
  void dispose() {
    _numberStreamController.close(); // Close the stream when disposing.
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StreamBuilder Example'),
      ),
      body: Center(
        child: 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.
            }
          },
        ),
      ),
    );
  }
}

Output:


C

chinmaya121221
Improve
Article Tags :

Explore

Lightbox