Flutter Web应用卡在rootBundle.loadString，加载白屏无响应

核心问题分析 #

你的代码中getArticleDtos方法存在异步处理错误：当使用map结合async回调时，会生成Iterable<Future<ArticleDto>>，直接用List.from转换得到的是List<Future<ArticleDto>>，但方法声明返回Future<List<ArticleDto>>，这种类型不匹配会导致异步流程无法正确完成，在Web环境下表现为加载卡住、白屏且无控制台报错。

修复方案 #

修改home_data_provider.dart中的getArticleDtos方法，使用Future.wait等待所有异步任务完成后再返回结果：

@override
Future<List<ArticleDto>> getArticleDtos() async {
  final contentJson = await rootBundle.loadString('assets/content.json');
  final content = json.decode(contentJson) as Iterable<Map<String, dynamic>>;

  // 将每个articleData的处理逻辑转为Future列表
  final articleFutures = content.map((articleData) async {
    final articlePath = articleData['articlePath'] as String;
    final article = await rootBundle.loadString(articlePath);

    return ArticleDto(
      title: articleData['title'] as String,
      topic: articleData['topic'] as String,
      articleInMarkdown: article,
      imagePath: articleData['imagePath'] as String,
      createdAt: articleData['createdAt'] as String,
    );
  }).toList();

  // 等待所有Future完成，返回最终的ArticleDto列表
  return Future.wait(articleFutures);
}

额外优化建议 #

1. 检查资源路径配置
   Web环境对资源路径大小写敏感，确保articlePath对应的资源已在pubspec.yaml中正确声明，路径拼写（包括大小写）完全一致。

2. 调整Cubit异步逻辑触发时机
   避免在Cubit构造函数中直接执行异步方法，建议将异步加载逻辑封装为单独的方法，在Cubit初始化时触发，同时添加状态管理处理加载、成功、失败状态，避免白屏：

class HomeCubit extends Cubit<HomeState> {
  final HomeRepository _repository;

  HomeCubit(...) : super(HomeInitial()) {
    loadArticles();
  }

  Future<void> loadArticles() async {
    try {
      emit(HomeLoading());
      final articles = await _repository.getArticles();
      emit(HomeLoaded(articles));
    } catch (e) {
      emit(HomeError(e.toString()));
    }
  }
}

在页面中使用BlocConsumer监听状态变化，根据状态渲染不同UI（比如加载时显示进度指示器，错误时显示提示）。

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