Flutter中如何在Scaffold组件内预览生成的PDF文件？

要在Scaffold里预览用pdf包生成的PDF，你需要将生成的PDF文档转为字节流，再借助PDF预览组件来展示。以下是具体实现步骤：

1. 添加PDF预览依赖 #

在项目的pubspec.yaml中添加用于预览PDF的包，比如pdfx：

dependencies:
  flutter:
    sdk: flutter
  pdf: ^3.10.0
  pdfx: ^2.5.0

执行flutter pub get完成依赖安装。

2. 修改代码实现生成与预览 #

调整代码逻辑，让PDF生成方法返回字节流，再用FutureBuilder配合预览组件在Scaffold中展示：

import 'package:flutter/material.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:pdfx/pdfx.dart';

class _PreviewInvoiceState extends State<PreviewInvoice> {
  // 生成PDF并返回字节流
  Future<Uint8List> makePdf() async {
    final document = pw.Document();
    document.addPage(
      pw.Page(
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return pw.Center(child: pw.Text('hello world'));
        },
      ),
    );
    // 将PDF文档转为字节流
    return document.save();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PDF预览')),
      body: FutureBuilder<Uint8List>(
        future: makePdf(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 用PdfViewer展示字节流形式的PDF
            return PdfView(
              controller: PdfController(
                document: PdfDocument.openData(snapshot.data!),
              ),
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('生成PDF失败: ${snapshot.error}'));
          }
          // 加载中显示加载指示器
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

关键说明 #

• makePdf改为异步方法并返回Uint8List（PDF的字节流），确保预览组件能直接读取。
• 用FutureBuilder处理PDF生成的异步过程，避免阻塞UI线程。
• 通过PdfController加载字节流，再用PdfView组件将PDF渲染到Scaffold的body区域。

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