Why Asynchronous Code Exists
Dart is single-threaded by default, running everything on one isolate. But apps constantly need to wait — for a network response, a file read, or a database query — and blocking that single thread while waiting would freeze the UI. Asynchronous programming lets Dart start a slow operation, keep the event loop running, and come back to handle the result once it's ready. Async/await is simply syntax that makes this non-blocking behavior look and read like ordinary sequential code.
Understanding Future
A Future represents a value that isn't available yet but will be at some point — either a successful result or an error. Every async operation in Dart (HTTP calls, file I/O, Timers) returns a Future. You can work with a Future in two ways: chaining .then()/.catchError(), or using async/await, which is generally easier to read for multi-step logic.
future_basic.dart
dart
Future<String> fetchUsername() {
return Future.delayed(Duration(seconds: 2), () => "Ahmed");
}
void main() {
fetchUsername().then((name) {
print("Hello, $name");
});
print("Fetching username...");
}Future States
A Future can be in one of three states: uncompleted (still running), completed with a value, or completed with an error. Understanding this lifecycle helps explain why code after a Future call runs immediately, while code inside .then() or after await waits for completion.
Flashcards
Card 1 of 1
0 0
Question
What is a Future in Dart?
Hint: Think of it as an IOU for a value.
Tap to flipAnswer
An object representing a value or error that will be available at some point in the future, rather than immediately.
The async and await Keywords
Marking a function async lets you use await inside it, and automatically wraps its return value in a Future. await pauses execution of that function (not the whole app) until the awaited Future completes, then resumes with the resolved value. This turns nested callback chains into code that reads top-to-bottom like synchronous logic.
async_await_basic.dart
dart
Future<void> printUsername() async {
print("Fetching username...");
String name = await fetchUsername();
print("Hello, $name");
}Rules for async Functions
An async function always returns a Future, even if you write 'return 5;' inside it — Dart wraps it as Future<int> automatically. If the function has no meaningful return value, its signature should be Future<void>. You can only use await inside a function marked async.
return_type.dart
dart
Future<int> getAge() async {
return 25; // Automatically becomes Future<int>
}Flashcards
Card 1 of 1
0 0
Question
What does 'await' actually pause?
Tap to flipAnswer
It pauses execution of the current async function only, not the entire app or event loop.
Error Handling with try/catch
Since await unwraps a Future's value, errors from a failed Future surface as normal Dart exceptions at the await line. This means you can use familiar try/catch/finally blocks instead of chaining .catchError(), keeping error handling close to where the failure actually happens.
error_handling.dart
dart
Future<void> loadData() async {
try {
final data = await fetchDataFromApi();
print("Data: $data");
} catch (e) {
print("Failed to load data: $e");
} finally {
print("Request finished");
}
}Running Futures Concurrently
Awaiting Futures one after another runs them sequentially, which wastes time when the operations don't depend on each other. Future.wait() runs multiple independent Futures concurrently and resolves once all of them complete, which is usually the right choice when you need several unrelated results before continuing.
future_wait.dart
dart
Future<void> loadDashboard() async {
final results = await Future.wait([
fetchUserProfile(),
fetchNotifications(),
fetchSettings(),
]);
final profile = results[0];
final notifications = results[1];
final settings = results[2];
}Flashcards
Card 1 of 1
0 0
Question
When should you use Future.wait() instead of sequential awaits?
Tap to flipAnswer
When the async operations are independent of each other and you just need all their results before continuing.
Async/Await in Flutter Widgets
In Flutter, async calls commonly appear inside button handlers, initState-triggered loads, or FutureBuilder. Since a State's build method can't be async itself, the usual pattern is to trigger an async method that updates state via setState once the result arrives, or to hand a Future directly to a FutureBuilder so the widget tree rebuilds automatically on each state change.
future_builder_example.dart
dart
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: fetchUsername(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text("Error: ${snapshot.error}");
}
return Text("Hello, ${snapshot.data}");
},
);
}
}Avoiding setState After Dispose
A common runtime warning happens when an async call finishes after its widget has been removed from the tree, and setState is still called. Guard against this by checking 'if (!mounted) return;' before calling setState inside an async callback.
mounted_check.dart
dart
Future<void> loadProfile() async {
final data = await fetchUserProfile();
if (!mounted) return;
setState(() {
_profile = data;
});
}Flashcards
Card 1 of 1
0 0
Question
Why check 'mounted' before setState in an async function?
Hint: The widget may be gone by the time await returns.
Tap to flipAnswer
To avoid calling setState on a State object whose widget has already been disposed, which throws a runtime error.
Final review
Test what you learned across the whole post.
Question 1 of 3medium
Which statement about await is correct?
Flashcards
Card 1 of 2
0 0
Question
async + await, in one sentence
Tap to flipAnswer
async marks a function as returning a Future and enables await inside it; await pauses that function until a given Future resolves, without blocking the rest of the app.