Topic: 7 Understanding async, await, and async*
This is our seventh topic from the Learn Flutter: Basic to Advance
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 functionfetchData()
returns aFuture
object that will eventually resolve to aString
. In Dart, aFuture
represents a potential value or error that will be available sometime in the future.async
: Theasync
keyword is used to mark the functionfetchData()
as asynchronous. It means that the function may perform asynchronous operations, and it will return aFuture
immediately without waiting for the asynchronous tasks to complete.await Future.delayed(Duration(seconds: 1))
: This line simulates an asynchronous operation by using theawait
keyword to pause the execution of the functionfetchData()
for one second without blocking the main thread.Future.delayed(Duration(seconds: 1))
creates aFuture
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 completedFuture<String>
and become the result of thefetchData()
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 namedprocessData()
that doesn't return any value (void
). It is marked with theasync
keyword, indicating that it contains asynchronous operations and will return a Future.String result = await fetchData();
: This line calls the asynchronous functionfetchData()
using theawait
keyword. Here's what happens:The
await
keyword pauses the execution of theprocessData()
function until thefetchData()
function completes and returns a value.The
fetchData()
function is awaited, meaning that the execution ofprocessData()
will wait forfetchData()
to finish.Once
fetchData()
completes, it returns a string value, and the execution ofprocessData()
resumes.The returned value from
fetchData()
is assigned to the variableresult
, which is of typeString
.
print(result);
: This line prints the value of theresult
variable to the console. Since it's after theawait
statement, it will only execute after thefetchData()
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 namedcountNumbers()
that returns aStream
of integers (Stream<int>
). The function is marked as asynchronous (async*
) because it is usedyield
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 usingFuture.delayed
. Whenawait
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 ofi
to the stream.yield
is used within anasync*
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! π