2.4 C
New York
Thursday, February 29, 2024

Flutter: Stream.periodic example

This article walks you through a complete example of using Stream.periodic in Flutter.

A Quick Note

The Stream.periodic constructor, as its name implies, is used to create a stream that broadcasts events repeatedly at period intervals. Simple usage:Advertisements

final Stream _myStream =
    Stream.periodic(const Duration(seconds: 1), (int count) {
       // Do something and return something here

You can find more information about Stream.periodic in the documentation. However, if you feel words are too boring and confusing and just like to dive into the code then move on to the example below.

The Example


The app we are going to build has a background color that changes over time. It also displays an increasing number in the center of the screen. We can stop these relentless behaviors by pressing the floating button.

Here’s how it works:

The Code

AdvertisementsThe full source code in main.dart with explanations:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      home: const HomeScreen(),

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  State<HomeScreen> createState() => _HomeScreenState();

class _HomeScreenState extends State<HomeScreen> {
  final Stream _myStream =
      Stream.periodic(const Duration(seconds: 1), (int count) {
    return count;

  // The subscription on events from _myStream
  late StreamSubscription _sub;

  // This number will be displayed in the center of the screen
  // It changes over time
  int _computationCount = 0;

  // Background color
  // In the beginning, it's indigo but it will be a random color later
  Color _bgColor = Colors.indigo;

  void initState() {
    _sub = _myStream.listen((event) {
      setState(() {
        _computationCount = event;

        // Set the background color to a random color
        _bgColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _bgColor,
      appBar: AppBar(
        title: const Text('KindaCode.com'),
        backgroundColor: Colors.transparent,
      body: Center(
        child: Text(
          style: const TextStyle(fontSize: 150, color: Colors.white),
      // This button is used to unsubscribe the stream listener
      floatingActionButton: FloatingActionButton(
        child: const Icon(
          size: 30,
        onPressed: () => _sub.cancel(),

  // Cancel the stream listener on dispose
  void dispose() {


We’ve examined a practical example of implementing Stream.periodic in Flutter. If you’d like to learn more about stream, similar things to stream, and other stuff in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.


Related Articles

Latest Articles