Learn to develop in a simplified way
Let's build a Weather App: Understanding Streams in Flutter

Let’s build a Simple Chat App: Understanding Streams in Flutter

One of the cornerstones of Flutter’s magic lies in its reactive approach, powered by the concepts of reactivity and streams.

What about Streams?

Streams are just a continous flow of data. In Flutter, streams provide a powerful way to handle asynchronous events and data flows.They act as a pipeline that emits a sequence of asynchronous data over time. This means you can listen to a stream and react to events as they occur, making your apps dynamic and responsive.

    • Streams: An asynchronous sequence of data events.
    • Subscription: The act of listening to a stream for events.
    • Sinks: A way to add data to a stream.
    • Controllers: Objects that manage a stream’s lifecycle and data flow.

    Let’s build a chat app to understand the streams:

    • Fetching Chat Messages:
      Stream<List<Message>> getMessages() async* {
        // Simulate fetching messages from a server
        await Future.delayed(Duration(seconds: 2));
        yield [Message("Hello!"), Message("How are you?")];
        await Future.delayed(Duration(seconds: 3));
        yield [Message("I'm doing well, thanks!")];
      }
      • Displaying Messages:
      StreamBuilder<List<Message>>(
        stream: getMessages(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return Text(snapshot.data![index].text);
              },
            );
          } else if (snapshot.hasError) {
            return Text("Error: ${snapshot.error}");
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      )
      • Sending Messages:
      // Create a stream controller for outgoing messages
      final _messageController = StreamController<Message>();
      
      // Add a message to the stream
      _messageController.sink.add(Message("New message!"));
      
      // Close the stream when finished
      _messageController.close();
      
      • Handling User Inputs:
      TextField(
        onChanged: (text) {
          // Send a new message when the user presses enter
          if (text.endsWith('\n')) {
            _messageController.sink.add(Message(text));
          }
        },
      )
      

      Additional Stream Features

      • Transformation: Modify data as it flows through a stream (e.g., filtering, mapping).
      • Error Handling: Gracefully handles errors that occur within a stream.
      • Combination: Combine multiple streams into a single stream (e.g., merging, concatenating).

      Conclusion

      Streams are a fundamental concept in Flutter app development. By understanding streams, you can build apps that react gracefully to changes and provide a seamless user experience.

      Share this article
      Leave a Reply

      Your email address will not be published. Required fields are marked *