Flutter跨平台应用中rootBundle.load在Web端失效问题求助

先确认资产配置正确性 #

首先检查pubspec.yaml的资产声明是否正确，Web端对配置的准确性要求更高：

flutter:
  assets:
    - assets/test.pdf

确保缩进层级正确（assets属于flutter节点下的子项），路径和实际文件位置完全匹配。

Web端的特殊处理逻辑 #

Flutter Web中rootBundle.load处理二进制资产时存在兼容性问题，导致返回空数组。此时可以改用HTTP请求加载本地资产，因为Web端的资产最终会作为静态文件部署：

import 'package:http/http.dart' as http;

Future<Uint8List> loadWebPdf() async {
  final response = await http.get(Uri.parse('assets/test.pdf'));
  if (response.statusCode != 200) {
    throw Exception('加载PDF失败');
  }
  return response.bodyBytes;
}

跨平台兼容写法 #

如果需要同时支持移动端和Web端，用kIsWeb区分平台实现：

import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;

Future<Uint8List> loadPdf() async {
  if (kIsWeb) {
    final response = await http.get(Uri.parse('assets/test.pdf'));
    return response.bodyBytes;
  } else {
    final data = await rootBundle.load('assets/test.pdf');
    return data.buffer.asUint8List();
  }
}

额外提示 #

• Flutter 3.x及以上版本中，Web端资产默认会打包到web/assets目录，因此assets/test.pdf的路径是正确的，无需添加额外前缀。
• 测试Web端时，建议使用flutter run -d chrome启动开发服务器，避免直接打开本地HTML文件引发的跨域问题。

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