Provider与调用页面间异步操作架构设计方案咨询

Hey there! Let's tackle this problem step by step—you're looking to centralize all your async operations (database calls, HTTP requests) while still letting individual pages work directly with the returned data, right? Here's a solid, scalable approach using Provider that hits both goals.

The key idea is to split your logic into two focused layers:

• A Repository that wraps all your data sources (local database, remote APIs). This is where you'll write all the actual async calls, keeping them centralized and easy to maintain.
• A Provider (like ChangeNotifier) that uses the Repository to fetch data, manages global state (loading, errors, cached data), and exposes methods for pages to call—while still letting those pages get the returned data directly.

This setup keeps your data layer decoupled from your UI, makes testing easier, and gives you the flexibility to handle async operations both globally and per-page.

1. Build the Repository Layer #

First, create a repository class that encapsulates all your async data operations. Each method returns a Future<T> so callers can use async/await to get results directly.

// Import your database/HTTP packages (e.g., sqflite, dio)
import 'package:sqflite/sqflite.dart';
import 'package:dio/dio.dart';

// Your data model
class Item {
  final String id;
  final String name;

  Item({required this.id, required this.name});

  // Helper methods to convert from DB/JSON
  factory Item.fromMap(Map<String, dynamic> map) {
    return Item(id: map['id'], name: map['name']);
  }

  factory Item.fromJson(Map<String, dynamic> json) {
    return Item(id: json['id'], name: json['name']);
  }
}

class DataRepository {
  final Database _localDb;
  final Dio _httpClient;

  // Inject dependencies (makes testing easier)
  DataRepository(this._localDb, this._httpClient);

  // Centralized database call
  Future<List<Item>> getDataFromDatabase() async {
    final List<Map<String, dynamic>> dbResults = await _localDb.query('items');
    return dbResults.map((map) => Item.fromMap(map)).toList();
  }

  // Centralized HTTP call
  Future<List<Item>> fetchDataFromApi() async {
    final response = await _httpClient.get('https://your-api-endpoint.com/items');
    return (response.data as List).map((json) => Item.fromJson(json)).toList();
  }
}

2. Create the Provider #

Next, build a ChangeNotifier Provider that uses the Repository. This provider will manage loading/error states for global UI updates, but also return the raw data to calling pages.

import 'package:flutter/foundation.dart';

class DataProvider extends ChangeNotifier {
  final DataRepository _repository;

  // Global state for all components
  List<Item>? _cachedItems;
  bool _isLoading = false;
  String? _errorMessage;

  // Getters for global state
  List<Item>? get cachedItems => _cachedItems;
  bool get isLoading => _isLoading;
  String? get errorMessage => _errorMessage;

  DataProvider(this._repository);

  // Method for pages to call—returns data directly and updates global state
  Future<List<Item>> getDataFromDatabase() async {
    _isLoading = true;
    _errorMessage = null;
    notifyListeners(); // Notify UI of loading state

    try {
      final fetchedData = await _repository.getDataFromDatabase();
      _cachedItems = fetchedData; // Update global cache
      return fetchedData; // Return data directly to the page
    } catch (e) {
      _errorMessage = e.toString();
      rethrow; // Let the page catch and handle the error too
    } finally {
      _isLoading = false;
      notifyListeners(); // Notify UI of finished loading
    }
  }

  // Repeat the pattern for API calls
  Future<List<Item>> fetchDataFromApi() async {
    _isLoading = true;
    _errorMessage = null;
    notifyListeners();

    try {
      final fetchedData = await _repository.fetchDataFromApi();
      _cachedItems = fetchedData;
      return fetchedData;
    } catch (e) {
      _errorMessage = e.toString();
      rethrow;
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
}

3. Use the Provider in Your Page #

Now, in your UI, you can call the provider's method, use async/await to get the data immediately, and still react to global state changes (like loading spinners).

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class DataPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Async Data Demo')),
      body: Consumer<DataProvider>(
        builder: (context, provider, child) {
          // Show loading state globally
          if (provider.isLoading) {
            return const Center(child: CircularProgressIndicator());
          }

          // Show error state globally
          if (provider.errorMessage != null) {
            return Center(child: Text('Error: ${provider.errorMessage}'));
          }

          // Show action button
          return Center(
            child: ElevatedButton(
              onPressed: () async {
                try {
                  // Call the provider method and get data directly
                  final items = await provider.getDataFromDatabase();
                  
                  // Use the data immediately in the page
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Loaded ${items.length} items!')),
                  );
                } catch (e) {
                  // Handle error locally in the page
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Failed to load data: $e')),
                  );
                }
              },
              child: const Text('Load Data from Database'),
            ),
          );
        },
      ),
    );
  }
}

• Centralized Management: All database/HTTP logic lives in the Repository—no scattered async calls across your UI. You can update, debug, or swap data sources (e.g., switch from sqflite to Hive) without touching your pages.
• Dual Functionality: Pages get direct access to the returned data via async/await, while the Provider maintains global state for other components (e.g., a header that shows the number of items).
• Error Handling: Both global and local error handling are supported—you can show a global error message and let the page handle specific actions (like retrying).

• Caching: Add logic in the Repository or Provider to cache results, so you don't repeat unnecessary async calls.
• Dependency Injection: Use a service locator (like get_it) to inject the Repository into the Provider—this makes unit testing a breeze (you can mock the Repository to test edge cases).
• Sealed State Class: Instead of separate _isLoading, _cachedItems, and _errorMessage variables, use a sealed class (like AsyncState) to represent loading/data/error states more cleanly.

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