Topic: 7 Understanding async, await, and async*

This is our seventh topic from the Learn Flutter: Basic to Advance

Topic: 7 Understanding async, await, and async*

Hello devs, Today, we're going to explore the world of async, await, and async*. These are super important when you're dealing with APIs. We'll dive deep into how these asynchronous programming tools work and how they can make your code more efficient and responsive when you're working with external services. Understanding async operations better will help you tackle tasks that involve waiting for responses from APIs or other asynchronous operations in your apps. Let's get started!

Async

In Flutter, async is used to mark a function as asynchronous. It allows you to perform operations asynchronously without blocking the main UI thread. When you mark a function as async, you can use the await keyword inside it to wait for the result of asynchronous operations.

Think of this as saying "I'm going to do something, but it might take some time." It's like starting a task without waiting for it to finish immediately.

Future<String> fetchData() async {
    // Perform some asynchronous operation, e.g., fetching data from an API
    await Future.delayed(Duration(seconds: 1)); // Simulating a network request delay
    return "Data fetched successfully";
}
  • Future<String>: This line indicates that the function fetchData() returns a Future object that will eventually resolve to a String. In Dart, a Future represents a potential value or error that will be available sometime in the future.

  • async: The async keyword is used to mark the function fetchData() as asynchronous. It means that the function may perform asynchronous operations, and it will return a Future immediately without waiting for the asynchronous tasks to complete.

  • await Future.delayed(Duration(seconds: 1)): This line simulates an asynchronous operation by using the await keyword to pause the execution of the function fetchData() for one second without blocking the main thread. Future.delayed(Duration(seconds: 1)) creates a Future that completes after a delay of one second.

  • return "Data fetched successfully";: Once the delay is over, the function resumes execution, and it returns the string "Data fetched successfully". This value will eventually be wrapped in a completed Future<String> and become the result of the fetchData() function.

Await

The await keyword in Flutter is used to pause the execution of an asynchronous function until the result of another asynchronous operation is available. It ensures that the function doesn't proceed further until the awaited operation completes, allowing you to write asynchronous code in a sequential and readable manner.

When you say "await" in Dart (Flutter's programming language), it's like saying "Hold on a sec, I'll wait here until this specific task I started earlier is done." It helps you pause and wait for a task to finish before moving on to the next step.

void processData() async {
    String result = await fetchData();
    print(result); // This line will be executed after the result is available
}
  • void processData() async: This line defines a function named processData() that doesn't return any value (void). It is marked with the async keyword, indicating that it contains asynchronous operations and will return a Future.

  • String result = await fetchData();: This line calls the asynchronous function fetchData() using the await keyword. Here's what happens:

    • The await keyword pauses the execution of the processData() function until the fetchData() function completes and returns a value.

    • The fetchData() function is awaited, meaning that the execution of processData() will wait for fetchData() to finish.

    • Once fetchData() completes, it returns a string value, and the execution of processData() resumes.

    • The returned value from fetchData() is assigned to the variable result, which is of type String.

  • print(result);: This line prints the value of the result variable to the console. Since it's after the await statement, it will only execute after the fetchData() function completes and the result is available.

Async*

In Dart, async* is used to define asynchronous generator functions. These functions can yield multiple values asynchronously using the yield keyword, allowing you to lazily generate a sequence of values without blocking the main thread. Asynchronous generators are useful for tasks like paginating through large datasets or processing streams of data.

This is a bit like saying "I'm going to do several things, and each might take some time. But you can keep doing other stuff while I'm working on each of these." It's useful for handling situations where you want to perform multiple tasks asynchronously and potentially yield results over time, like processing a list of items or streaming data.

Stream<int> countNumbers() async* {
    for (int i = 1; i <= 5; i++) {
        await Future.delayed(Duration(seconds: 1)); // Simulating delay
        yield i;
    }
}
  • Stream<int> countNumbers() async*: This line defines a function named countNumbers() that returns a Stream of integers (Stream<int>). The function is marked as asynchronous (async*) because it is used yield to emit values asynchronously.

  • for (int i = 1; i <= 5; i++) { ... }: This is a loop that iterates from 1 to 5. In each iteration, the loop body will execute.

  • await Future.delayed(Duration(seconds: 1));: Inside the loop, this line simulates a delay of one second asynchronously using Future.delayed. When await is used, it means that the loop will pause execution for one second, but it won't block the main thread. This allows other tasks to be performed while waiting.

  • yield i;: After the delay, this line yields (emits) the current value of i to the stream. yield is used within an async* function to emit values one by one as they become available. In this case, it emits the values from 1 to 5 sequentially with a one-second delay between each emission.

In simpler terms, async lets you do something without waiting, await lets you pause and wait for something specific to finish, and async* lets you do multiple things over time without blocking everything else. These concepts help make Flutter apps responsive and smooth by handling tasks efficiently.

Alright devs, that's a wrap for our blog! I hope this post has made it easier for you to grasp async, await, and async*. Alright, let's meet again in our next topic where we'll dive into Mixins in Dart.


Connect with Me:

Hey there! If you enjoyed reading this blog and found it informative, why not connect with me on LinkedIn? 😊 You can also follow my Instagram page for more mobile development-related content. πŸ“²πŸ‘¨β€πŸ’» Let’s stay connected, share knowledge and have some fun in the exciting world of app development! 🌟

Check out my Instagram page

Check out my LinkedIn

Β