Flutter：从UI调用异步代码的最佳实践

Great question! This is one of the most common hurdles Flutter developers face when working with async data sources like Firebase—since the build method has to return a Widget synchronously, you can’t just await an async call directly in it. Let’s walk through the best approaches to handle this cleanly.

1. Use FutureBuilder (Simple, One-Off Requests) #

This is the go-to solution for most basic scenarios where you need to fetch data once and display it. FutureBuilder listens to the state of a Future and automatically rebuilds the UI when the future completes.

Key Notes: #

• Don’t create the Future inside the build method—if you do, every time the widget rebuilds (e.g., on state changes), it’ll re-run the async request. Instead, store the Future in your State class.
• Handle all possible states: loading, success, and error.

Example Code: #

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

  @override
  State<MyFirebaseWidget> createState() => _MyFirebaseWidgetState();
}

class _MyFirebaseWidgetState extends State<MyFirebaseWidget> {
  late final Future<List<MyRecord>> _recordsFuture;

  @override
  void initState() {
    super.initState();
    // Initialize the future once when the widget is created
    _recordsFuture = FirebaseService().fetchRecords();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<MyRecord>>(
      future: _recordsFuture,
      builder: (context, snapshot) {
        // Loading state
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // Error state
        if (snapshot.hasError) {
          return Center(child: Text('Oops! Error: ${snapshot.error}'));
        }
        // Success state (data is ready)
        if (snapshot.hasData) {
          final records = snapshot.data!;
          return ListView.builder(
            itemCount: records.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(records[index].title));
            },
          );
        }
        // Fallback for unexpected states
        return const Center(child: Text('No data available'));
      },
    );
  }
}

2. Fetch Data in initState (Manual State Management) #

If you prefer more control over the async flow, you can fetch data when the widget initializes, then update the UI with setState once the data is ready.

Example Code: #

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

  @override
  State<MyFirebaseWidget> createState() => _MyFirebaseWidgetState();
}

class _MyFirebaseWidgetState extends State<MyFirebaseWidget> {
  List<MyRecord>? _records;
  String? _error;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // Call an async method to fetch data
    _fetchRecords();
  }

  Future<void> _fetchRecords() async {
    try {
      final records = await FirebaseService().fetchRecords();
      setState(() {
        _records = records;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _error = e.toString();
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    if (_error != null) {
      return Center(child: Text('Error: $_error'));
    }
    if (_records == null) {
      return const Center(child: Text('No records found'));
    }
    return ListView.builder(
      itemCount: _records!.length,
      itemBuilder: (context, index) {
        return ListTile(title: Text(_records![index].title));
      },
    );
  }
}

3. Use State Management Libraries (Complex Apps) #

For larger apps with shared state or frequent data updates, using a state management library (like Riverpod, Provider, Bloc, or GetX) is a better approach. These libraries handle async operations outside the UI layer, keeping your build methods clean and your state organized.

Example with Riverpod: #

First, define a provider that handles the async data fetch:

final recordsProvider = FutureProvider<List<MyRecord>>((ref) async {
  return await FirebaseService().fetchRecords();
});

Then, consume the provider in your UI:

class MyFirebaseWidget extends ConsumerWidget {
  const MyFirebaseWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final recordsAsync = ref.watch(recordsProvider);
    return recordsAsync.when(
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (error, stack) => Center(child: Text('Error: $error')),
      data: (records) => ListView.builder(
        itemCount: records.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(records[index].title));
        },
      ),
    );
  }
}

Pro Tips: #

• Handle errors gracefully: Always show a user-friendly error message instead of letting exceptions crash the app.
• Optimize loading states: Replace basic CircularProgressIndicator with skeleton screens or placeholders for better UX.
• Cancel pending requests: If your widget might be disposed before the future completes, use cancelable futures (like CancelableOperation) to avoid memory leaks.

内容的提问来源于stack exchange，提问作者Wonderjimmy