Flutter中缓存Firebase实时数据库数据，避免页面重复显示加载屏

一、页面内本地缓存（无需状态管理） #

如果数据仅在当前页面使用，直接在页面的State类中缓存数据和状态标记即可，无需引入额外状态管理库。

实现步骤：

1. 在State类中定义缓存变量与状态标记：

class _YourPageState extends State<YourPage> {
  List<YourDataModel>? _cachedData;
  bool _isFetched = false;
  late Future<List<YourDataModel>> _fetchDataFuture;

  @override
  void initState() {
    super.initState();
    _fetchDataFuture = _fetchDataFromFirebase();
  }

  Future<List<YourDataModel>> _fetchDataFromFirebase() async {
    // 已缓存则直接返回
    if (_isFetched && _cachedData != null) {
      return _cachedData!;
    }
    // 从Firebase实时数据库获取数据
    final databaseReference = FirebaseDatabase.instance.ref('your-data-path');
    final snapshot = await databaseReference.get();
    final dataMap = snapshot.value as Map<dynamic, dynamic>;
    
    List<YourDataModel> dataList = dataMap.entries.map((entry) {
      return YourDataModel.fromMap(entry.key, entry.value);
    }).toList();
    
    // 更新缓存与状态
    setState(() {
      _cachedData = dataList;
      _isFetched = true;
    });
    return dataList;
  }
}

2. 在FutureBuilder中复用缓存的Future：

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<YourDataModel>>(
    future: _fetchDataFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // 仅首次加载显示加载状态，后续返回直接用缓存
        return const CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return Text('加载失败：${snapshot.error}');
      } else {
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(snapshot.data![index].name));
          },
        );
      }
    },
  );
}

注意：这种方式下页面销毁后缓存会丢失，若需持久化缓存或跨页面共享，需使用状态管理。

二、全局状态管理（跨页面共享缓存） #

如果多个页面需要复用同一数据，或希望页面销毁后缓存保留，建议使用状态管理库，以Provider为例：

1. 创建数据提供者类：

class DataProvider extends ChangeNotifier {
  List<YourDataModel>? _cachedData;
  bool _isFetched = false;

  List<YourDataModel>? get cachedData => _cachedData;
  bool get isFetched => _isFetched;

  Future<void> fetchData() async {
    if (_isFetched && _cachedData != null) return;
    
    final databaseReference = FirebaseDatabase.instance.ref('your-data-path');
    final snapshot = await databaseReference.get();
    final dataMap = snapshot.value as Map<dynamic, dynamic>;
    
    _cachedData = dataMap.entries.map((entry) {
      return YourDataModel.fromMap(entry.key, entry.value);
    }).toList();
    _isFetched = true;
    notifyListeners();
  }
}

2. 在全局注册Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => DataProvider(),
      child: const MyApp(),
    ),
  );
}

3. 在页面中使用缓存数据：

class YourPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final dataProvider = Provider.of<DataProvider>(context, listen: false);
    // 页面初始化时触发数据获取（仅未获取过的情况）
    WidgetsBinding.instance.addPostFrameCallback((_) {
      dataProvider.fetchData();
    });

    return Consumer<DataProvider>(
      builder: (context, provider, child) {
        if (!provider.isFetched) {
          return const CircularProgressIndicator();
        } else if (provider.cachedData == null) {
          return const Text('暂无数据');
        } else {
          return ListView.builder(
            itemCount: provider.cachedData!.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(provider.cachedData![index].name));
            },
          );
        }
      },
    );
  }
}

三、改用StreamBuilder（实时数据场景更优） #

Firebase实时数据库支持实时监听数据变化，用StreamBuilder替代FutureBuilder，既能避免重复加载，又能自动同步数据更新：

Widget build(BuildContext context) {
  final databaseReference = FirebaseDatabase.instance.ref('your-data-path');
  return StreamBuilder<DatabaseEvent>(
    stream: databaseReference.onValue,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return Text('加载失败：${snapshot.error}');
      } else if (!snapshot.hasData || snapshot.data!.snapshot.value == null) {
        return const Text('暂无数据');
      } else {
        final dataMap = snapshot.data!.snapshot.value as Map<dynamic, dynamic>;
        List<YourDataModel> dataList = dataMap.entries.map((entry) {
          return YourDataModel.fromMap(entry.key, entry.value);
        }).toList();
        return ListView.builder(
          itemCount: dataList.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(dataList[index].name));
          },
        );
      }
    },
  );
}

这种方式会保持对数据库的实时监听，数据变化时自动更新UI，返回页面时不会重新触发加载，直接展示最新数据。

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