时间戳

首页 > 解决方案 > 如何将 native_pdf_view 集成到我的应用程序中（颤振）？

flutter - 如何将 native_pdf_view 集成到我的应用程序中（颤振）？

问题描述

我想在我的应用程序中显示一个带有 native_pdf_view ( https://pub.dev/packages/native_pdf_view ) 包的 PDF 文件。

我试过这样：

class OStundenplan extends StatelessWidget {

  final pdfController = PdfController(
    document: PdfDocument.openAsset('assets/stundenplan.pdf'),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Offline Stundenplan'),
        ),
        body: Builder(builder: (BuildContext context) {
          return PdfView(controller: _pdfController);
        }));
  }
}

  ostundenplan() {
    Navigator.push(
        context,
        MaterialPageRoute(
            Widget pdfView() => PdfView(
      controller: pdfController,
    );
  }

稍后在应用程序中：

RaisedButton.icon(onPressed: ostundenplan, icon: Icon(Icons.signal_wifi_off), label: Text('Offline Stundenplan'),),

但它不起作用。谁能帮我？

编辑：

当我像 pradyot1996 所说的那样尝试时，我得到了这个：

Compiler message:
lib/main.dart:315:37: Error: Type 'PDFReader' not found.
class _PDFReaderState extends State<PDFReader> {
                                    ^^^^^^^^^
lib/main.dart:315:7: Error: Type argument 'invalid-type' doesn't conform to the bound 'StatefulWidget' of the type variable 'T' on 'State' in the supertype 'State' of class '_PDFReaderState'.
 - 'StatefulWidget' is from 'package:flutter/src/widgets/framework.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/framework.dart').
Try changing type arguments so that they conform to the bounds.
class _PDFReaderState extends State<PDFReader> {
      ^
/C:/flutter/packages/flutter/lib/src/widgets/framework.dart:1029:22: Context: This is the type variable whose bound isn't conformed to.
abstract class State<T extends StatefulWidget> with Diagnosticable {
                     ^

Compiler message:
lib/main.dart:315:37: Error: Type 'PDFReader' not found.
class _PDFReaderState extends State<PDFReader> {
                                    ^^^^^^^^^
lib/main.dart:315:7: Error: Type argument 'invalid-type' doesn't conform to the bound 'StatefulWidget' of the type variable 'T' on 'State' in the supertype 'State' of class '_PDFReaderState'.
 - 'StatefulWidget' is from 'package:flutter/src/widgets/framework.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/framework.dart').
Try changing type arguments so that they conform to the bounds.
class _PDFReaderState extends State<PDFReader> {
      ^
/C:/flutter/packages/flutter/lib/src/widgets/framework.dart:1029:22: Context: This is the type variable whose bound isn't conformed to.
abstract class State<T extends StatefulWidget> with Diagnosticable {
                     ^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.
                   ^^^^^^^^^^

好像没PDFReader找到 我能做些什么？

编辑2：

那是我得到的红屏： 错误画面

顺便说一句，这是我的导航器：

  ostundenplan() {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => PDFReader()));
  }

编辑 3：

class PDFReader extends StatefulWidget {
  static const route_name = 'pdf_reader';

  @override
  _PDFReaderState createState() => _PDFReaderState();
}

class _PDFReaderState extends State<PDFReader> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Offline Stundenplan'),
      ),
      body: FutureBuilder(
        future: PDFDocument.fromAsset('assets/stundenplan.pdf'),
        builder: (_, pdfData) {},
      ),
    );
  }
}

标签： flutterdart

解决方案

在此处输入图像描述试试这个包flutter_plugin_pdf_viewer。

这对我来说非常好。我将 PDF 文件保存在 firebase 存储中并通过 URL 打开它。

PDFDocument doc = await PDFDocument.fromURL(LINK);

PDFViewer(document: doc)

编辑：

下面的类显示了实现。如果您不需要刷新状态，您甚至可以使用 StatelessWidget 类。

class PDFReader extends StatefulWidget {
  static const route_name = 'pdf_reader';

  @override
  _PDFReaderState createState() => _PDFReaderState();
}

class _PDFReaderState extends State<PDFReader> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Document'),
      ),
      body: FutureBuilder(
        future: PDFDocument.fromURL('http://www.africau.edu/images/default/sample.pdf'),
        builder: (_, pdfData) {
          if (pdfData.connectionState == ConnectionState.waiting) {
            return CenterCircularProgressBar();
          } else if (pdfData.data == null) {
            return CenterText('Not able to open PDF file');
          } else {
            return PDFViewer(document: pdfData.data);
          }
        },
      ),
    );
  }
}

现在您只需要导航到 PDFReader 小部件。如果您想将 PDF 数据从一个屏幕传递到另一个屏幕，您也可以这样做，而不是在 PDFReader 屏幕中对其进行硬编码。

CenterCircularProgressBar() 是一个自定义小部件，它在屏幕中央显示一个圆形进度条，直到加载 PDF，CenterText 是一个自定义小部件，如果我们没有从 PDFDocument.fromURL 获取数据，它会显示错误。代码如下。

所以在这一行

PDFDocument.fromURL('http://www.africau.edu/images/default/sample.pdf')

您可以使用 PDFDocument 提供的 fromAsset、fromURL 和 fromFile 方法来显示 PDF。PDFViewer 是处理 PDF 视图的包提供的自定义类。

class CenterCircularProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }
}

class CenterText extends StatelessWidget {
  final String stringValue;

  CenterText(this.stringValue);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        stringValue,
      ),
    );
  }
}

推荐阅读