Flutter – Handling Asynchronous Data

Asynchronous events in Flutter, refer to events that do not occur immediately and may take some time to complete. They typically involve asynchronous operations, allowing your application to continue executing other tasks while waiting for the asynchronous operation to finish. Asynchronous events are essential for handling tasks such as network requests, file I/O, and user interactions that might introduce delays or uncertainties in how long they take to complete. In Flutter, we can use streams for handling asynchronous events. In this article, we are going to handle the asynchronous data events using Streams class in Flutter. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

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 'package:flutter/material.dart';
import 'dart:async';

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(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      home: StreamDemo(),
    );
  }
}

Step 5: Create StreamDemo Class

In this class we are going to implement Streams class with a combination of StreamBuilder to handler asynchronous data events. When the user press the Floating action Button we act as the data is coming from an network source.Comments are added for better understanding.

Dart

class StreamDemo extends StatefulWidget {
  @override
  _StreamDemoState createState() => _StreamDemoState();
}

class _StreamDemoState extends State<StreamDemo> {
  // Create a StreamController for handling a stream of strings
  StreamController<String> _streamController = StreamController<String>();

  @override
  void dispose() {
    // Close the stream controller
    // when done to avoid resource leaks
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stream Demo'),
      ),
      body: Center(
        child: StreamBuilder<String>(
          stream: _streamController.stream,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }
            if (!snapshot.hasData) {
              return Text('No data', style: TextStyle(fontWeight: FontWeight.bold));
            }
            return Text('Data: ${snapshot.data}', style: TextStyle(fontWeight: FontWeight.bold));
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Acting as data coming from an asynchronous source
          Future.delayed(Duration(seconds: 2), () {
            // Add data to the stream
            _streamController.sink.add('Hello, Flutter!');
          });
        },
        child: Icon(Icons.send),
      ),
    );
  }
}

In this above code:

• We create a StreamController<String> named _streamController to manage the stream of string data.
• In the StreamDemo widget’s build method, we use a StreamBuilder widget. It listens to the stream provided _streamController.stream and rebuilds the UI whenever new data arrives.
• Inside the floatingActionButton, we simulate data arriving asynchronously by adding “Hello, Flutter!” to the stream after a delay of 2 seconds when the button is pressed.
• When the app is closed or disposed, we make sure to call _streamController.close() to properly close the stream controller.

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,
       theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      home: StreamDemo(),
    );
  }
}

class StreamDemo extends StatefulWidget {
  @override
  _StreamDemoState createState() => _StreamDemoState();
}

class _StreamDemoState extends State<StreamDemo> {
  // Create a StreamController for handling a stream of strings
  StreamController<String> _streamController = StreamController<String>();

  @override
  void dispose() {
    // Close the stream controller
    // when done to avoid resource leaks
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stream Demo'),
      ),
      body: Center(
        child: StreamBuilder<String>(
          stream: _streamController.stream,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }
            if (!snapshot.hasData) {
              return Text('No data', style: TextStyle(fontWeight: FontWeight.bold));
            }
            return Text('Data: ${snapshot.data}', style: TextStyle(fontWeight: FontWeight.bold));
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Acting as data coming from an asynchronous source
          Future.delayed(Duration(seconds: 2), () {
            // Add data to the stream
            _streamController.sink.add('Hello, Flutter!');
          });
        },
        child: Icon(Icons.send),
      ),
    );
  }
}

Output: