Flutter结合Provider与三元运算符，如何避免中间Widget闪烁

问题根源在于你当前的逻辑仅等待姓名类数据加载完成就进入Widget判断，但地址、车牌等后续判断依赖的数据可能仍在异步加载，导致短暂显示Widget1后又切换到Widget2。要解决这个问题，必须确保所有用于判断的核心数据都加载完成后，再切换到目标Widget。

快速修复方案（基于现有代码修改） #

直接把所有后续判断需要用到的字段整合到加载指示器的判断条件中，只有当所有必要字段都非空时，才进行Widget1和Widget2的选择：

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    // 统一获取Store实例，减少重复调用Provider.of
    final vehicleStore = Provider.of<VehicleDataModel>(context, listen: true);
    final userStore = Provider.of<LoggedUserStore>(context);
    final tenantStore = Provider.of<LoggedTenantStore>(context);
    
    // 获取固定参数（无需监听变化）
    final userEmail = Provider.of<LoggedUserStore>(context, listen: false).userEmail.toString();
    final tenantId = Provider.of<LoggedTenantStore>(context, listen: false).tenantId.toString();

    final vehicleData = vehicleStore.vehicleListLength != 0
        ? vehicleStore.getVehicleByIndex(0)
        : null;
    final userData = userStore.getUserByGnetId(userEmail);
    final tenantData = tenantStore.getTenantInfoByTenantId(tenantId);

    // 检查所有必要字段：只要有一个为空，就显示加载指示器
    final isAllDataReady = userData?.name != null &&
        userData?.surname != null &&
        tenantData?.firstName != null &&
        tenantData?.lastName != null &&
        userData?.addressCity != null &&
        tenantData?.addressCity != null &&
        vehicleData?.licencePlate != null;

    if (!isAllDataReady) {
      return const Center(child: CircularProgressIndicator());
    }

    // 所有数据就绪后，再判断显示目标Widget
    return (userData.addressCity == null ||
            tenantData.addressCity == null ||
            vehicleData.licencePlate == null)
        ? Widget1()
        : Widget2();
  }
}

更优雅的方案：在Store层维护加载状态 #

逐个字段检查的方式不够简洁，推荐在每个Store中添加isLoading状态，统一管理数据加载流程：

1. 给Store添加加载状态（以LoggedUserStore为例） #

class LoggedUserStore extends ChangeNotifier {
  bool _isLoading = true;
  bool get isLoading => _isLoading;

  // 加载用户数据的异步方法
  Future<void> fetchUserData() async {
    _isLoading = true;
    notifyListeners();
    try {
      // 调用API获取并处理数据
      // ...
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  // 现有其他方法...
}

同理给LoggedTenantStore和VehicleDataModel添加isLoading状态及对应异步加载逻辑。

2. 界面层基于加载状态判断 #

@override
Widget build(BuildContext context) {
  final vehicleStore = Provider.of<VehicleDataModel>(context);
  final userStore = Provider.of<LoggedUserStore>(context);
  final tenantStore = Provider.of<LoggedTenantStore>(context);

  // 只要任意一个Store还在加载，就显示指示器
  final isLoading = vehicleStore.isLoading || userStore.isLoading || tenantStore.isLoading;
  if (isLoading) {
    return const Center(child: CircularProgressIndicator());
  }

  // 所有数据加载完成后，再获取数据并判断目标Widget
  final userEmail = userStore.userEmail.toString();
  final tenantId = tenantStore.tenantId.toString();
  final vehicleData = vehicleStore.vehicleListLength != 0
      ? vehicleStore.getVehicleByIndex(0)
      : null;
  final userData = userStore.getUserByGnetId(userEmail);
  final tenantData = tenantStore.getTenantInfoByTenantId(tenantId);

  return (userData?.addressCity == null ||
          tenantData?.addressCity == null ||
          vehicleData?.licencePlate == null)
      ? Widget1()
      : Widget2();
}

为什么之前的逻辑会出现中间界面？ #

你之前的代码仅检查姓名类字段，当这些字段加载完成后就立刻进入Widget判断，但地址、车牌等字段可能仍在加载（比如API未返回这部分数据），导致先显示Widget1；等后续数据加载完成触发Build重新判断后，又切换到Widget2。通过统一判断所有必要字段或依赖Store的加载状态，就能确保只有当所有数据就绪时才显示最终Widget，避免中间切换。

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