Flutter中能否等待BlocProvider的create函数执行？及Cubit异步初始化导致页面无法获取最新状态的问题求助

看起来你遇到了Bloc/Cubit结合异步操作时的典型状态同步问题，我来帮你拆解原因并给出可行的解决方案。

问题核心原因 #

CustomerCubit的init()是异步方法，当你在BlocProvider的create里调用CustomerCubit()..init()时，init()会立即返回一个Future，但BlocProvider是同步执行的，它不会等待异步加载完成就会继续构建页面。

页面的build方法会优先执行输入框赋值逻辑，这时候SharedPreferences的加载还没完成，Cubit的状态还是初始值，所以输入框拿到的并不是你存在本地的保存数据。

你的现有代码 #

CustomerCubit的init方法 #

void init() async {
  final prefs = await SharedPreferences.getInstance(); 
  List<String>? personalDetails = prefs.getStringList("personalDetails");
  if (personalDetails != null) {
    emit(
      CustomerState(
        firstName: personalDetails[0],
        surName: personalDetails[1],
        street: personalDetails[2],
        streetNo: personalDetails[3],
        plz: int.parse(personalDetails[4]),
        city: personalDetails[5],
        salutation: personalDetails[6],
        email: (personalDetails[7] == "") ? null : personalDetails[7],
      ),
    );
  }
}

CredentialPage核心代码 #

@override
Widget build(BuildContext context) {
  return BlocProvider(
    create: (context) => CustomerCubit()..init(), 
    child: Builder(
      builder: (context) {
        _firstName.text = BlocProvider.of<CustomerCubit>(context).state.firstName; 
        _surName.text = BlocProvider.of<CustomerCubit>(context).state.surName;
        _street.text = BlocProvider.of<CustomerCubit>(context).state.streetNo;
        _plz.text = BlocProvider.of<CustomerCubit>(context).state.plz.toString();
        _city.text = BlocProvider.of<CustomerCubit>(context).state.city;
        _email.text = BlocProvider.of<CustomerCubit>(context).state.email ?? "";
        return Container();
      },
    ),
  );
}

解决方案 #

方案1：用BlocListener监听状态更新 #

BlocListener专门用来监听状态变化并执行副作用（比如更新输入框文本），它会在Cubit emit新状态时触发回调，确保输入框拿到的是加载后的最新数据。

修改后的CredentialPage代码：

@override
Widget build(BuildContext context) {
  return BlocProvider(
    create: (context) => CustomerCubit()..init(),
    child: Builder(
      builder: (context) {
        // 先给输入框设置初始状态
        final initialState = context.read<CustomerCubit>().state;
        _firstName.text = initialState.firstName;
        _surName.text = initialState.surName;
        _street.text = initialState.street;
        _streetNo.text = initialState.streetNo;
        _plz.text = initialState.plz.toString();
        _city.text = initialState.city;
        _email.text = initialState.email ?? "";

        // 用BlocListener监听状态变化，同步更新输入框
        return BlocListener<CustomerCubit, CustomerState>(
          listener: (context, state) {
            _firstName.text = state.firstName;
            _surName.text = state.surName;
            _street.text = state.street;
            _streetNo.text = state.streetNo;
            _plz.text = state.plz.toString();
            _city.text = state.city;
            _email.text = state.email ?? "";
          },
          child: Container(
            // 你的页面输入框等UI内容
          ),
        );
      },
    ),
  );
}

方案2：在页面initState中监听Cubit状态流 #

如果你的页面是StatefulWidget（从使用TextEditingController来看应该是），可以在initState中监听Cubit的状态流，状态更新时自动同步到输入框：

@override
void initState() {
  super.initState();
  // 获取Cubit，listen: false表示不触发页面重建
  final customerCubit = BlocProvider.of<CustomerCubit>(context, listen: false);
  // 监听状态流，状态变化时更新输入框
  customerCubit.stream.listen((state) {
    _firstName.text = state.firstName;
    _surName.text = state.surName;
    _street.text = state.street;
    _streetNo.text = state.streetNo;
    _plz.text = state.plz.toString();
    _city.text = state.city;
    _email.text = state.email ?? "";
  });
}

@override
Widget build(BuildContext context) {
  return BlocProvider(
    create: (context) => CustomerCubit()..init(),
    child: Container(
      // 你的页面UI内容
    ),
  );
}

额外优化建议 #

1. 给CustomerState设置合理初始值：避免初始状态出现null导致的异常，示例如下：

class CustomerState extends Equatable {
  final String firstName;
  final String surName;
  final String street;
  final String streetNo;
  final int plz;
  final String city;
  final String salutation;
  final String? email;

  const CustomerState({
    this.firstName = "",
    this.surName = "",
    this.street = "",
    this.streetNo = "",
    this.plz = 0,
    this.city = "",
    this.salutation = "",
    this.email,
  });

  @override
  List<Object?> get props => [firstName, surName, street, streetNo, plz, city, salutation, email];
}

2. 简化Cubit获取方式：使用context.read()替代重复的BlocProvider.of(context)，代码更简洁：

final cubit = context.read<CustomerCubit>();
_firstName.text = cubit.state.firstName;

内容来源于stack exchange