Lära 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"),
        ),
      ),
    );
  }
}

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 4

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

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"),
        ),
      ),
    );
  }
}

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 4