Learn Async State Handling | State Management

Asynchronous state is a core part of any modern Flutter app because most real-world data—such as network requests, database reads, or device interactions—does not arrive instantly. Handling async state ensures your app remains responsive, provides feedback to users, and can gracefully manage data that arrives with delay or might even fail. Without proper async state handling, your app may freeze, feel unresponsive, or display outdated information, which leads to poor user experience.

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344
            
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Simulate an async data fetch
Future<String> fetchUsername() async {
  await Future.delayed(Duration(seconds: 2));
  return "flutter_user";
}

// FutureProvider for username
final usernameProvider = FutureProvider<String>((ref) async {
  return fetchUsername();
});

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UsernameScreen(),
    );
  }
}

class UsernameScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final usernameAsync = ref.watch(usernameProvider);

    return Scaffold(
      appBar: AppBar(title: Text("Async State Example")),
      body: Center(
        child: usernameAsync.when(
          data: (username) => Text("Hello, $username!"),
          loading: () => CircularProgressIndicator(),
          error: (err, stack) => Text("Error: $err"),
        ),
      ),
    );
  }
}

When working with asynchronous data, you must consider both loading and error states to ensure a smooth user experience. In the FutureProvider example, the widget responds to three possible states: loading, data, and error. While the data is being fetched, a loading indicator is shown. If the data arrives successfully, the result is displayed. If something goes wrong, an error message appears. This pattern helps prevent blank screens and keeps users informed about what is happening in the app.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243
            
// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

Future<String> fetchGreeting() async {
  await Future.delayed(Duration(seconds: 3));
  return "Welcome to Flutter!";
}

final greetingProvider = FutureProvider<String>((ref) async {
  return fetchGreeting();
});

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GreetingScreen(),
    );
  }
}

class GreetingScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final greetingAsync = ref.watch(greetingProvider);

    return Scaffold(
      appBar: AppBar(title: Text("Async Loading Example")),
      body: Center(
        child: greetingAsync.when(
          data: (greeting) => Text(greeting),
          loading: () => CircularProgressIndicator(),
          error: (err, stack) => Text("Error: $err"),
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how to implement a FutureProvider in a Flutter app?

What are some best practices for handling errors in async state?

How do I show a loading indicator while waiting for data in Flutter?

Swipe to show menu

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344
            
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Simulate an async data fetch
Future<String> fetchUsername() async {
  await Future.delayed(Duration(seconds: 2));
  return "flutter_user";
}

// FutureProvider for username
final usernameProvider = FutureProvider<String>((ref) async {
  return fetchUsername();
});

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UsernameScreen(),
    );
  }
}

class UsernameScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final usernameAsync = ref.watch(usernameProvider);

    return Scaffold(
      appBar: AppBar(title: Text("Async State Example")),
      body: Center(
        child: usernameAsync.when(
          data: (username) => Text("Hello, $username!"),
          loading: () => CircularProgressIndicator(),
          error: (err, stack) => Text("Error: $err"),
        ),
      ),
    );
  }
}

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243
            
// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

Future<String> fetchGreeting() async {
  await Future.delayed(Duration(seconds: 3));
  return "Welcome to Flutter!";
}

final greetingProvider = FutureProvider<String>((ref) async {
  return fetchGreeting();
});

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GreetingScreen(),
    );
  }
}

class GreetingScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final greetingAsync = ref.watch(greetingProvider);

    return Scaffold(
      appBar: AppBar(title: Text("Async Loading Example")),
      body: Center(
        child: greetingAsync.when(
          data: (greeting) => Text(greeting),
          loading: () => CircularProgressIndicator(),
          error: (err, stack) => Text("Error: $err"),
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 4