Flutter Stream.periodic

Flutter Stream.periodic, periodic timer, flutter stream subscription, cancel and listen

We will learn about flutter stream.periodic and how to cancel and subscribe. We will create stream of events using Stream.periodic and then subscribe it to StreamSubscription.

Continuous events would be emitted from Stream.periodic and then we will that event to our app. This event would be integer type.

So it would more like counter or timer app where every one second later, we see the changes in value.

You may ask, how do we create a source of events?

  final Stream _myStream =
  Stream.periodic(const Duration(seconds: 1), (int count) {
    return count;
  });

The above code creates source of events or streams of events. Every one second later, it returns a count value. An integer value.

This source of events we subscribe to StreamSubscription object _sub

    _sub = _myStream.listen((event) {
      setState(() {
        _computationCount=event;
        // Set the background color to a random color
        _bgColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];
      });
    });

With _sub it's subscribed. We would also use _sub.cancel() to cancel the subscription.

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,

      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

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

  late StreamSubscription _sub;
  int _computationCount = 0;

  Color _bgColor = Colors.indigo;

  @override
  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)];
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _bgColor,
      appBar: AppBar(
        title: const Text('Stream'),
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        child: Text(
          _computationCount.toString(),
          style: const TextStyle(fontSize: 150, color: Colors.blue),
        ),
      ),
      // This button is used to unsubscribe the stream listener
      floatingActionButton: FloatingActionButton(
        child: const Icon(
          Icons.stop,
          size: 30,
        ),
        onPressed: () => _sub.cancel(),
      ),
    );
  }
  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

}

Learn more about

StreamBuilder vs FutureBuilder

Recent posts