Flutter中无网络时Firebase数据可删除，需禁用该离线删除操作

为什么无网络时仍能执行删除？ #

Firebase Firestore默认开启了离线持久化功能：当设备处于无网络状态时，删除操作会先写入本地缓存，界面会立刻同步本地的变更（看起来像是删除成功了），等设备恢复网络后，本地的变更才会自动同步到云端。所以你看到的“删除执行”其实是本地缓存的更新，并非直接操作云端数据。

实现无网络时禁止删除的方案 #

我们可以通过检查网络连接状态，在执行删除操作前判断是否有网络，无网络时阻止操作并提示用户。

步骤1：添加网络状态依赖 #

在pubspec.yaml中加入connectivity_plus包（用于检测网络状态）：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^4.0.1

步骤2：实现网络检查方法 #

在你的页面代码中添加一个检查网络是否可用的方法：

import 'package:connectivity_plus/connectivity_plus.dart';

// 检查当前是否有网络连接
Future<bool> _hasNetwork() async {
  var result = await Connectivity().checkConnectivity();
  return result != ConnectivityResult.none;
}

步骤3：修改删除逻辑 #

在弹出确认对话框前，先检查网络状态，无网络直接提示用户：

return TransactionCard(
  ontap: () async {
    // 先检查网络
    bool hasNetwork = await _hasNetwork();
    if (!hasNetwork) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('无网络连接，无法删除记录')),
      );
      return;
    }

    // 有网络才弹出确认对话框
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          content: const Text('确定要删除这条记录吗？'),
          actions: [
            TextButton(
              onPressed: () async {
                await FirebaseFirestore.instance
                    .collection('users')
                    .doc(widget.loggeduser.userid)
                    .collection('expenses')
                    .doc(transactionlist[index]['id'])
                    .delete()
                    .then((_) => Navigator.pop(context))
                    .then((_) => print('记录已删除'));
              },
              child: const Text('确定'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('取消'),
            )
          ],
        );
      },
    );
  },
  // 其他参数保持不变
  amount: trans.amount.toStringAsFixed(2),
  datetime: trans.date.toString(),
  paymentby: trans.paymentmode,
  category: trans.category.title,
  categoryicon: trans.category.iconurl,
  isexpense: trans.isexpense,
);

可选：实时监听网络状态 #

如果需要实时感知网络变化（比如网络断开时自动禁用删除点击），可以在页面的initState中添加网络监听：

StreamSubscription<ConnectivityResult>? _networkSubscription;
bool _isOnline = true;

@override
void initState() {
  super.initState();
  // 监听网络状态变化
  _networkSubscription = Connectivity().onConnectivityChanged.listen((result) {
    setState(() {
      _isOnline = result != ConnectivityResult.none;
    });
  });
}

@override
void dispose() {
  _networkSubscription?.cancel();
  super.dispose();
}

之后可以根据_isOnline状态控制点击是否可用：

ontap: _isOnline ? () async { /* 弹出对话框逻辑 */ } : null,

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