Flutter中initState加载过慢出现短暂红屏如何添加加载器规避？

问题根因 #

红屏是widget.floorPlan为null时直接调用.pois属性触发的空调用运行时错误，按以下方案修改即可：

具体修改步骤 #

• 第一步：给SearchStore补充加载状态标识
  给你的SearchStore类新增bool isLoading = true;属性，用来标记POI数据是否准备完成。
• 第二步：调整State初始化与数据更新逻辑
  initState里先做空判断避免空调用，同时重写didUpdateWidget方法监听父组件网络请求完成后传回的floorPlan更新，抽离公共赋值逻辑统一处理空场景：

class _SearchTabState extends State<SearchTab> {
  final TextEditingController textController = TextEditingController();
  SearchStore store;

  @override
  void initState() {
    super.initState();
    store = SearchStore();
    _updateFilteredPOI();
  }

  // 父组件参数更新时触发重赋值，适配网络请求完成后floorPlan从null变为有值的场景
  @override
  void didUpdateWidget(covariant SearchTab oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.floorPlan != widget.floorPlan) {
      _updateFilteredPOI();
    }
  }

  void _updateFilteredPOI() {
    if (widget.floorPlan != null) {
      store.filteredPOI = widget.floorPlan.pois;
      store.isLoading = false;
    } else {
      store.isLoading = true;
    }
    // 若使用Mobx/Provider等响应式状态管理，无需调用setState，直接更新store状态触发重建即可
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    // 加载状态直接返回居中加载器，避免红屏
    if (store.isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    // 数据准备完成后返回原有业务页面
    return 你原来的页面Widget代码;
  }
}

• 第三步：可选边界处理
  如果存在网络请求失败导致floorPlan一直为null的场景，可给SearchStore新增isLoadFailed状态，加载失败时显示重试提示与按钮。

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