Flutter问题：如何等待数据库插入完成后再跳转页面？

我是Flutter新手，在数据库插入用户记录后尝试切换页面，但页面会在数据插入完成前就跳转，导致数据未插入引发错误。相关代码如下：

插入并跳转的代码：

await MemberDatabase.insertMember(member);

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => ShopKeeperPage(
      email: email,
      loginType: 'normal',
    ),
  ));

MemberDatabase类代码：

class MemberDatabase {
  static var memberCollection;
  static connect() async {
    print("trying to connect");
    var db = await Db.create(MONGO_CONN_URL);
    await db.open();
    print("Connected to the database");

    memberCollection = db.collection(MEMBER_COLLECTION);
  }

  static insertMember(Member member) async {
    return await memberCollection.insert(member.toMap());
  }
}

解决方案 #

1. 确保调用代码在异步函数中 #

await关键字仅能在标记为async的函数内生效，如果你的代码是在UI回调（比如按钮点击）中，必须将回调声明为异步：

onPressed: () async {
  await MemberDatabase.insertMember(member);
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) => ShopKeeperPage(
        email: email,
        loginType: 'normal',
      ),
    ));
},

2. 确保数据库连接已完成 #

如果MemberDatabase.connect()没有在insertMember之前执行完成，memberCollection会为null，导致插入操作异常（可能被忽略进而直接执行跳转）。可以修改insertMember方法，自动处理连接：

static Future insertMember(Member member) async {
  // 检查连接状态，未连接则先执行连接
  if (memberCollection == null) {
    await connect();
  }
  return await memberCollection.insert(member.toMap());
}

3. 添加错误捕获与处理 #

为避免插入失败时仍执行跳转，建议添加异常捕获，同时给用户反馈：

try {
  await MemberDatabase.insertMember(member);
  // 仅在插入成功后跳转
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) => ShopKeeperPage(
        email: email,
        loginType: 'normal',
      ),
    ));
} catch (e) {
  print('用户记录插入失败: $e');
  // 通过SnackBar提示用户插入失败
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('注册失败，请重试')),
  );
}

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