What is Stream Periodic in Flutter - How to create and cancel Stream.periodic

Last updated Oct 30, 2021


Stream is one of the asynchronous programming in flutter. Streams can deliver one or more values and errors instead of single value.

 

There are two types of Streams available

  • Single Subscription Stream which will contains only single listener.
  • Boradcast Streams which will emits stream data continuously with infinite listeners

We can create streams in different ways

  • Transforming existing stream
  • Create Stream using async function
  • Create Stream using StreamController

 

Is Stream and Future are the same?

Both Stream and Future works asynchronously

Both will have some values in its.

Stream is a combination of multiple Futures where are Future contains only single response

 

Lets create a Stream with Periodic

void main()  async {
    Duration interval = Duration(seconds: 1);
    Stream<int> stream = Stream<int>.periodic(interval, (it)=>it+1);
    await for(int i in stream){
      print(i);
    }
  }

 

check above code, there the Stream.periodic creates a stream which will emits the stream data periodically based on time interval.

 

This will print the data like below

1
2
3
4
5
6
7
8
9

 

 

Listen the Stream

void main()  async {
    Duration interval = Duration(seconds: 2);
    late StreamSubscription _sub;
    Stream<int> stream = Stream<int>.periodic(interval, (value)=>value+1);

     _sub= stream.listen((event) {
      print("Stream Data ${event}");
    });

  }

 

Create Stream with Stream.take

void main()  async {
  Duration interval = Duration(seconds: 2);
  Stream<int> stream = Stream<int>.periodic(interval, (value)=>value+1);

  stream=stream.take(5);
  stream.listen((event) {
    print("Stream Data ${event}");
  });
}

 

The above stream will emits only 5, we created stream with limited count as 5

Stream.take will be based on count passed as argument

Output:

Stream Data 1
Stream Data 2
Stream Data 3
Stream Data 4
Stream Data 5

 

 

Create Stream with condition While

We can also create stream by applying the takeWhile condition

void main()  async {
  Duration interval = Duration(seconds: 2);
  Stream<int> stream = Stream<int>.periodic(interval, (value)=>value+1);

  stream=stream.takeWhile(condition);
  stream.listen((event) {
    print("Stream Data ${event}");
  });
}
bool condition(int x){
  return x <= 5;
}

 

Here it stream will emits until the condition true. So this will print the stream data until it reaches 5.

 

Stream with skip()

By using skip, we can skip some of stream data

void main()  async {
  Duration interval = Duration(seconds: 2);
  Stream<int> stream = Stream<int>.periodic(interval, (value)=>value+1);

  stream = stream.take(8);
  stream = stream.skip(3);
  stream.listen((event) {
    print("Stream Data ${event}");
  });
}

 

This will skip the first 3 events and takes other events

Output:

Stream Data 4
Stream Data 5
Stream Data 6
Stream Data 7
Stream Data 8

 

 

Other Stream functions

Stream.toList() → Future<List>

Stream. forEach()

Stream .length 

 

Create Simple Flutter example with StreamBuilder

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
    title: 'Flutter Stream Example',
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool quizStart=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Stream Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Center(
          child: (!quizStart)?
              TextButton(
            onPressed: (){
              setState(() {
                quizStart=true;
              });
            },
                child: Text("Start Timer"),
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 8)),
                  backgroundColor: MaterialStateProperty.all(Colors.pink),
                  foregroundColor: MaterialStateProperty.all(Colors.white),
                  minimumSize: MaterialStateProperty.all(Size(double.infinity,40)
                ),
          )):StreamBuilder(
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return Text(
                  'Quize TimeUp!',
                  style: TextStyle(
                    fontSize: 30.0,
                  ),
                );
              } else if (snapshot.connectionState == ConnectionState.waiting) {
                return Text(
                  'Waiting For Stream',
                  style: TextStyle(
                    fontSize: 30.0,
                  ),
                );
              }
              return Text(
                '00:${snapshot.data.toString().padLeft(2,'0')}',
                style: TextStyle(
                  fontSize: 30.0,
                ),
              );
            },
            initialData: 0,
            stream: _stream(),
          ),
        ),
      ),
    );
  }

  Stream<int> _stream() {
    Duration interval = Duration(seconds: 1);
    Stream<int> stream = Stream<int>.periodic(interval, transform);
    stream = stream.take(59);
    return stream;
  }

  int transform(int value) {
    return value;
  }
}

 

Flutter streambuilder example

 

Flutter how do i cancel stream

 

 

How do i close the Stream

To close the stream we will use the StreamSubscription and call the cancel() method

Duration interval = Duration(seconds: 1);
Stream<int> stream = Stream<int>.periodic(interval, transform);
stream = stream.take(59);

late StreamSubscription<int> sub;
sub=stream.listen((event) { 
  
  if(event==4)
    {
      sub.cancel();
    }
});

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

54 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions