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.