What is Async and Await in Flutter

What is Async and Await in Flutter: A Beginner’s Guide to Asynchronous Programming

Introduction

Flutter is known for creating smooth, responsive applications. But to achieve this, it’s essential to understand asynchronous programming, particularly async, await, and Future. These concepts allow you to handle long-running tasks, like fetching data from the internet, without blocking your app’s user interface.

In this guide, we’ll dive deep into how async, await, and Future work in Flutter, with simple explanations, practical code examples, and best practices to help you write efficient and responsive Flutter applications.

What is Asynchronous Programming?

In programming, tasks are often divided into two categories:

Synchronous: Tasks are performed sequentially, one after the other. This can lead to blocking operations, where the app waits for a task to complete before continuing.
Asynchronous: Tasks can run independently of the main program flow. This allows other parts of the app to run while waiting for a task, like a network request, to complete.

In Flutter, asynchronous programming allows your app to remain smooth and responsive even when performing time-consuming operations. This is where Future, async, and await come into play.

Understanding `Future` in Flutter

In Flutter, a Future is a core class used to represent an asynchronous operation. A Future will eventually complete with either a value (success) or an error (failure).

Completed with a Value: The task is successful, and you receive the result.
Completed with an Error: Something went wrong, like a network issue, and an error is returned.

Declaring a Future

Here’s an example of a Future that completes with a string after a 2-second delay:

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return "Data received";
}

In this example:

fetchData() returns a Future that completes after a 2-second delay.
When complete, it provides the string “Data received”.

You can call this function to start the process, and it will return a Future<String> immediately without waiting for the 2-second delay to finish.

How to Use `async` and `await`

The keywords async and await make it easier to work with Future objects. They allow you to write asynchronous code that reads like synchronous code.

async: Marks a function as asynchronous. An async function always returns a Future.
await: Pauses the function until the awaited Future completes.

Example of Using `async` and `await`

Consider the fetchData() example from earlier. Here’s how you would use await to wait for the result.

void main() async {
  String result = await fetchData();
  print(result); // Output: Data received
}

In this example:

await fetchData() pauses the execution until the Future completes.
Once complete, it assigns the result (“Data received”) to the result variable.

Using async and await makes code more readable and avoids the need for complex callbacks.

Practical Examples of Async and Await

1. Fetching Data from an API

Imagine you’re making a network request to fetch data from a server. Here’s a simplified example of how you’d do this with async and await.

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> fetchUserData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users/1'));

  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print("User name: ${data['name']}");
  } else {
    throw Exception('Failed to load user data');
  }
}

void main() async {
  await fetchUserData();
}

In this code:

fetchUserData() is marked as async, allowing us to use await within it.
The await keyword pauses execution until the get request completes.
If successful, the response data is decoded and printed. If unsuccessful, an exception is thrown.

2. Delayed Task

You can use Future.delayed() to simulate a delayed task, which can be useful in scenarios like showing a splash screen.

Future<void> showSplashScreen() async {
  await Future.delayed(Duration(seconds: 3));
  print("Splash screen finished");
}

void main() async {
  await showSplashScreen();
  print("Welcome to the app!");
}

Here:

The showSplashScreen() function pauses for 3 seconds before completing.
Once complete, “Welcome to the app!” is printed.

Common Errors and How to Handle Them

Unhandled Exception: Ensure that you handle exceptions using try-catch blocks. try { await fetchUserData(); } catch (e) { print("Error: $e"); }
Null or Uncompleted Future: Make sure your Future functions always return a result, even if it’s null, to avoid hanging states.
Forgotten await: If you forget await, the Future won’t complete before moving on, leading to unintended behavior. Always use await if you need the result immediately.

Best Practices for Asynchronous Code

Avoid Blocking the UI: Always use async functions for time-consuming operations. This keeps your UI smooth and responsive.
Use async and await Wisely: Only mark a function as async if it contains an await statement.
Handle Errors: Wrap await calls in try-catch blocks to handle potential errors gracefully.
Test Asynchronous Code: Testing async code ensures that functions complete correctly and return expected results.

Conclusion

Understanding async, await, and Future in Flutter is crucial for building responsive apps. These concepts allow you to handle asynchronous tasks effectively, ensuring your app remains smooth and user-friendly. By mastering asynchronous programming, you can manage network requests, delayed tasks, and other long-running operations without blocking the UI.

Explore Other Flutter Topics…