Flutter加载PDF文件后无法渲染至屏幕问题排查

我尝试使用以下代码加载PDF文件并将其渲染到屏幕：

import 'package:flutter/material.dart';
import 'package:pdf_viewer_plugin/pdf_viewer_plugin.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:file_picker/file_picker.dart';
import 'dart:io';
import 'dart:developer';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  FileLoad createState() => FileLoad();
}

class FileLoad extends State<MyApp> {
  String _filePath = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test PDF',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home:
        Scaffold(
          backgroundColor: Colors.grey,
          bottomNavigationBar: BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
              BottomNavigationBarItem(icon: Icon(Icons.folder), label: "Load File")
            ],
            onTap: (int index) async {
              var go = 1;
              if (index == 1) {
                var status = await Permission.storage.status;
                if (status != PermissionStatus.granted) {
                  var result = await Permission.storage.request();
                  if (result != PermissionStatus.granted) {
                    go = 0;
                  }
                }
                if (go == 1) {
                  FilePickerResult? result = await FilePicker.platform.pickFiles();
                  if (result != null) {
                    File file = File(result.files.single.path!);
                    setState(() {
                      _filePath = file.path;
                      log('_filePath: $_filePath');
                    });
                  }
                }
              }
            },
          ),
          body:
            PdfView(path: _filePath, gestureNavigationEnabled: true,)
        )
    );
  }
}

我能在日志中看到文件选择器选中的文件路径正确，但屏幕上没有渲染任何内容，控制台也未触发任何错误。请问这段代码存在什么问题？

1. 初始空路径导致的渲染异常 #

PdfView在初始状态下接收的是空字符串_filePath = ""，这会让组件初始化时加载无效路径，后续即使通过setState更新路径，组件可能不会重新触发渲染逻辑。

解决方法：在body中根据_filePath是否为空做条件渲染，空的时候显示占位组件，非空时再加载PdfView：

body: _filePath.isEmpty 
    ? const Center(child: Text("请选择PDF文件"))
    : PdfView(path: _filePath, gestureNavigationEnabled: true,)

2. 权限与文件访问的潜在问题 #

• 对于Android 13及以上版本，Permission.storage已经不再适用，需要使用Permission.manageExternalStorage或者针对文件类型的特定权限（比如Permission.readMediaDocuments），旧的存储权限可能无法让应用正常读取选中的文件。
• 另外，FilePicker返回的路径可能是应用沙箱外的路径，部分PDF渲染插件无法直接访问，建议改用文件字节数据加载：

修改文件选择后的逻辑：

// 先在状态类中添加变量：Uint8List? _fileBytes;
if (result != null) {
  Uint8List fileBytes = result.files.single.bytes!;
  setState(() {
    _fileBytes = fileBytes;
    log('已获取文件字节数据');
  });
}

然后调整body的渲染逻辑：

body: _fileBytes == null 
    ? const Center(child: Text("请选择PDF文件"))
    : PdfView(bytes: _fileBytes!, gestureNavigationEnabled: true,)

3. 插件兼容性问题 #

pdf_viewer_plugin插件已长时间未维护，可能与新版本Flutter或系统存在兼容性问题，导致无声失败。建议更换为更活跃的PDF渲染插件，比如flutter_pdfview，它的稳定性和适配性更好。

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