在 Flutter 中显示适用于 iOS 的 PDF 内联文件

Question

I am developing an App in flutter specifically for iOS (at this stage) and I need to add PDF file(s) to it. The problem is that flutter has no native way to display PDF files (as far as I researched).

From this tread it looks like it shouldn't it be too difficult to add PDF support to iOS devices using this plugin. However, I am still confused about how exactly to integrate it into my Flutter Application.

Any help would be appreciated!

Answer 1

When I was implementing the functionality for PDF viewer, there was no PDF plugin.

However, funny enough a friend at work found out that there is already a PDF viewer implemented for Flutter here , which we ended up using.

Note: At the time of writing the question, 16.08 there was not yet any plugin available. The mentioned was created on 30.08.

Answer 2

If you are looking for quick and easy way to display PDF, this might be the one.

pdf_flutter

Load PDF from network:

PDF.network(
        'https://raw.githubusercontent.com/FlutterInThai/Dart-for-Flutter-Sheet-cheet/master/Dart-for-Flutter-Cheat-Sheet.pdf',
        height: 500,
        width: 300,
        )

Load PDF from files:

File fileName;  
PDF.file(
    fileName,
    height: 200,
    width: 100,
)

Load PDF from assets:

PDF.assets(
    "assets/pdf/demo.pdf",
    height: 200,
    width: 100,
)

Answer 3

add the dependencies in the pubspec.yaml

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  pdf_viewer_plugin: ^1.0.0+2
  path_provider: ^1.6.1
  http: ^0.12.0+4

main.dart

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:pdf_viewer_plugin/pdf_viewer_plugin.dart';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  String path;
  @override
  initState() {
    super.initState();
  }
  Future<String> get _localPath async {
    final directory = await getApplicationDocumentsDirectory();

    return directory.path;
  }

  Future<File> get _localFile async {
    final path = await _localPath;
    return File('$path/teste.pdf');
  }

  Future<File> writeCounter(Uint8List stream) async {
    final file = await _localFile;
    // Write the file
    return file.writeAsBytes(stream);
  }

  Future<Uint8List> fetchPost() async {
    final response = await http.get(
        'https://expoforest.com.br/wp-content/uploads/2017/05/exemplo.pdf');
    final responseJson = response.bodyBytes;

    return responseJson;
  }

  loadPdf() async {
    writeCounter(await fetchPost());
    path = (await _localFile).path;

    if (!mounted) return;

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              if (path != null)
                Container(
                  height: 300.0,
                  child: PdfViewer(
                    filePath: path,
                  ),
                )
              else
                Text("Pdf is not Loaded"),
              RaisedButton(
                child: Text("Load pdf"),
                onPressed: loadPdf,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 4

there working code -

Add this plugin to pubspec.yaml - 

>> flutter_full_pdf_viewer: ^1.0.6

on alert dialog positive button click I redirecting to view pdf -

 Future<void> onPositiveButtonClick() async {
    String _filePath = '';

String _directory = await ExtStorage.getExternalStoragePublicDirectory(ExtStorage.DIRECTORY_DOWNLOADS);
    //todo geeting right directory path here
    print("directory" + _directory);
    _filePath = '$_directory/$fileName';

  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => ActivityPdfView(_filePath)));

  }

and this is my Activitypdfview to show pdf -

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';

class ActivityPdfView extends StatefulWidget {

  String filePath;

  ActivityPdfView(String filePath){
    this.filePath = filePath;
}

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

class _ActivityPdfViewState extends State<ActivityPdfView> {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: MyPDFList(widget.filePath), //call MyPDF List file
    );
  }
}

class MyPDFList extends StatelessWidget {

  String pathPDF = "";
  MyPDFList(String filePath){
    this.pathPDF = filePath;
  }

  @override
  Widget build(BuildContext context) {

    return PDFViewerScaffold(
        appBar: AppBar(
          title: Text("Document"),
          backgroundColor: Colors.deepOrangeAccent,
        ),
        path: pathPDF
    );
  }

}

Answer 5

Depending on what's the min version your app supports, if it's iOS 11 and above, you can use PDFKit . Otherwise WebKit is also a good option.