Async/await and Futures in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding Future.delayed behavior

What will be displayed on the screen after running this Flutter code snippet?

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Future<String> fetchData() async {
    await Future.delayed(const Duration(seconds: 1));
    return 'Data Loaded';
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder<String>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: Text('Loading...'));
            } else if (snapshot.hasData) {
              return Center(child: Text(snapshot.data!));
            } else {
              return const Center(child: Text('Error'));
            }
          },
        ),
      ),
    );
  }
}

A The screen shows 'Loading...' for 1 second, then changes to 'Data Loaded'.

B The screen shows 'Error' because the Future never completes.

C The screen immediately shows 'Data Loaded' without delay.

D The screen remains blank because no widget is returned.

💡 Hint

Think about what Future.delayed does and how FutureBuilder updates UI.

The FutureBuilder shows 'Loading...' while waiting for the Future to complete. After 1 second delay, fetchData returns 'Data Loaded', which is then displayed.

🧠 Conceptual

intermediate

Identifying the error in async function usage

What error will this Flutter async function cause when called?

Flutter

Future<void> loadData() async {
  String data = fetchData();
  print(data);
}

Future<String> fetchData() async {
  await Future.delayed(const Duration(seconds: 1));
  return 'Hello';
}

A SyntaxError due to missing await keyword.

B No error; it prints 'Hello' after 1 second.

C TypeError because fetchData() returns a Future<String>, not String.

D Runtime error because fetchData() is not awaited.

💡 Hint

Check the type returned by fetchData() and how it is assigned.

fetchData() returns a Future, but the code assigns it directly to a String variable without awaiting, causing a type mismatch error.

❓ lifecycle

advanced

StatefulWidget and async data loading

In this Flutter StatefulWidget, what is the correct way to load async data and update the UI?

Flutter

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String data = 'Loading...';

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    final result = await Future.delayed(const Duration(seconds: 1), () => 'Loaded');
    data = result;
  }

  @override
  Widget build(BuildContext context) {
    return Text(data);
  }
}

A The widget shows 'Loading...' and never updates because setState is missing.

B The widget shows 'Loading...' and then updates to 'Loaded' automatically.

C The widget throws an error because fetchData is async in initState.

D The widget shows 'Loaded' immediately without delay.

💡 Hint

Think about how Flutter knows to rebuild the UI after data changes.

Without calling setState after data changes, Flutter does not rebuild the widget, so the UI stays showing 'Loading...'.

📝 Syntax

advanced

Correct async function syntax in Dart

Which option shows the correct syntax for an async function that returns a Future after 2 seconds?

A

Future getNumber() async {
  await Future.delayed(Duration(seconds: 2));
  return '42';
}

B

int getNumber() async {
  await Future.delayed(Duration(seconds: 2));
  return 42;
}

C

Future<int> getNumber() {
  return 42;
}

D

Future<int> getNumber() async {
  await Future.delayed(Duration(seconds: 2));
  return 42;
}

💡 Hint

Check return types and async keyword usage.

Option D correctly declares a Future return type, uses async, awaits delay, and returns an int. Option D has wrong return type. Option D is not async and returns int directly. Option D returns a String instead of int.

🔧 Debug

expert

Debugging FutureBuilder with null future

What happens if you pass a null future to FutureBuilder in Flutter?

Flutter

FutureBuilder<String>(
  future: null,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data ?? 'No data');
    } else {
      return const Text('Waiting');
    }
  },
)

A The builder never runs because future is null.

B The builder runs immediately with connectionState.done and shows 'No data'.

C The builder shows 'Waiting' forever because future never completes.

D The builder throws a runtime error because future is null.

💡 Hint

Check how FutureBuilder treats a null future.

If future is null, FutureBuilder treats it as already completed with no data, so connectionState is done and snapshot.data is null.

Practice

1.

What does the async keyword do in a Flutter function?

easy

A. It makes the function run faster by using multiple threads.

B. It allows the function to use await to pause until a Future completes.

C. It converts the function into a widget.

D. It automatically retries the function if it fails.

Solution

1. Step 1: Understand the role of async

   The async keyword marks a function so it can pause execution until a Future finishes.

2. Step 2: Connect async with await

   Inside an async function, you can use await to wait for a Future without blocking the app.

3. Final Answer:

   It allows the function to use await to pause until a Future completes. -> Option B

4. Quick Check:

   async enables await usage [OK]

Hint: Remember: async lets you pause with await inside functions [OK]

Common Mistakes:

• Thinking async runs code faster by multithreading
• Confusing async with UI widgets
• Assuming async retries failed calls automatically

2.

Which of the following is the correct way to declare a function that returns a Future of type int?

?

easy

A. Future<int> fetchNumber() async { return 42; }

B. int fetchNumber() async { return 42; }

C. Future fetchNumber() { return 42; }

D. async Future<int> fetchNumber() { return 42; }

Solution

1. Step 1: Check return type and async keyword

   The function must return a Future<int> and be marked async to use await or return a Future.

2. Step 2: Validate syntax correctness

   Future<int> fetchNumber() async { return 42; } correctly declares the return type and uses async before the function body.

3. Final Answer:

   Future<int> fetchNumber() async { return 42; } -> Option A

4. Quick Check:

   Correct Future return type with async [OK]

Hint: Future return type goes before function name, async after [OK]

Common Mistakes:

• Placing async before Future in declaration
• Missing Future return type
• Returning int directly without Future

3.

What will be printed by this Flutter code?

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'Done';
}

void main() async {
  print('Start');
  var result = await fetchData();
  print(result);
  print('End');
}

medium

A. Start\nDone\nEnd

B. Done\nStart\nEnd

C. Start\nEnd\nDone

D. Start\nDone

Solution

1. Step 1: Trace the print statements and await

   First, 'Start' prints immediately. Then await fetchData() pauses main until fetchData completes after 1 second.

2. Step 2: After fetchData returns, print result and 'End'

   Once fetchData returns 'Done', it prints 'Done' then prints 'End'.

3. Final Answer:

   Start\nDone\nEnd -> Option A

4. Quick Check:

   Await pauses main, so prints in order [OK]

Hint: Await pauses code, so prints happen in sequence [OK]

Common Mistakes:

• Assuming 'Done' prints before 'Start'
• Ignoring await delay effect
• Thinking 'End' prints before 'Done'

4.

Identify the error in this Flutter async code snippet:

Future<void> loadData() async {
  var data = fetchData();
  print(data);
}

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'Data loaded';
}

medium

A. print cannot be used inside async functions.

B. fetchData() should not be async.

C. Missing await before fetchData() causing print to show Future instance.

D. Duration.seconds is invalid syntax.

Solution

1. Step 1: Check how fetchData() is called

   fetchData() returns a Future<String>, but loadData() does not await it, so data is a Future, not the string.

2. Step 2: Understand print output

   Printing data prints the Future object, not the resolved string. Adding await fixes this.

3. Final Answer:

   Missing await before fetchData() causing print to show Future instance. -> Option C

4. Quick Check:

   Await needed to get Future result [OK]

Hint: Always await Futures before using their results [OK]

Common Mistakes:

• Forgetting to await async calls
• Thinking print can't be used in async
• Misreading Duration syntax

5.

You want to fetch user data and then fetch user posts only after the user data is ready. Which code correctly uses async/await to do this?

Future<String> fetchUser() async {
  await Future.delayed(Duration(seconds: 1));
  return 'User123';
}

Future fetchPosts(String user) async {
  await Future.delayed(Duration(seconds: 1));
  return ['Post1', 'Post2'];
}

void main() async {
  // Fill in the blanks
  var user = ?;
  var posts = ?;
  print('User: $user');
  print('Posts: $posts');
}

hard

A. var user = fetchUser();\nvar posts = fetchPosts(user);

B. var user = await fetchUser();\nvar posts = fetchPosts(user);

C. var user = fetchUser();\nvar posts = await fetchPosts(await user);

D. var user = await fetchUser();\nvar posts = await fetchPosts(user);

Solution

1. Step 1: Await fetchUser() to get user before fetching posts

   We must wait for fetchUser() to complete to get the user string before calling fetchPosts.

2. Step 2: Await fetchPosts(user) to get posts list

   Since fetchPosts returns a Future, we await it to get the actual list before printing.

3. Final Answer:

   var user = await fetchUser();\nvar posts = await fetchPosts(user); -> Option D

4. Quick Check:

   Await both calls in sequence for correct data [OK]

Hint: Await each async call in order to get real results [OK]

Common Mistakes:

• Not awaiting fetchUser before fetchPosts
• Not awaiting fetchPosts result
• Trying to await non-Future values