My Pdf document is not downloading or opening where as image file is opening after download in flutter

Question

My Pdf document is not downloading or opening where as image file is opening after download in flutter.

I have use file picker to pick image files and pdf files and send them to firebase storage.

My image file is downloading and opening perfectly fine , but unable to download PDF file after sending it to firebase storage.

May be it is downloading, but unable to view when clicked on download button.

   Future<void> downloadFile(StorageReference ref) async {
    final String url = await ref.getDownloadURL();
    final http.Response downloadData = await http.get(url);
    final Directory systemTempDir = Directory.systemTemp;
    final File tempFile = File('${systemTempDir.path}/tmp.jpg');
    if (tempFile.existsSync()) {
      await tempFile.delete();
    }
    await tempFile.create();
    final StorageFileDownloadTask task = ref.writeToFile(tempFile);
    final int byteCount = (await task.future).totalByteCount;
    var bodyBytes = downloadData.bodyBytes;
    final String name = await ref.getName();
    final String path = await ref.getPath();
    print(
      'Success!\nDownloaded $name \nUrl: $url'
          '\npath: $path \nBytes Count :: $byteCount',
    );
    _scaffoldKey.currentState.showSnackBar(
      SnackBar(
        backgroundColor: Colors.white,
        content: Image.memory(
          bodyBytes,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}``

Please suggest me if any changes needed in the above code or any where

Answer 1

Flutter supports opening Images by default, to open pdf's you need to use pdf plugin (dependencies). https://codecarbon.com/top-pdf-widgets-for-flutter/ go through this link, I think 7. pdf_viewer_plugin suits you for this app.

Dependencies:
flutter_full_pdf_viewer: ^1.0.6 # MIT  Licence

Create a new file display-pdf.dart and past the below code there.

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

class DisplayPDF extends StatelessWidget {
  final String pdfPath;
  final String title;

  DisplayPDF(this.pdfPath, this.title);

  @override
  Widget build(BuildContext context) {
    return PDFViewerScaffold(
        appBar: AppBar(
          title: Text(title),
          centerTitle: true,
        ),
        path: pdfPath);
  }
}

Create a file pdf-utilities.dart and past the below code there.

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

class PdfUtilities {
  final String pdfPath;
  final BuildContext context;

  PdfUtilities(this.pdfPath, this.context);

  Future<String> prepareTestPdf() async {
    final ByteData bytes = await DefaultAssetBundle.of(context).load(pdfPath);
    final Uint8List list = bytes.buffer.asUint8List();

    final tempDir = await getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$pdfPath';

    final file = await File(tempDocumentPath).create(recursive: true);
    file.writeAsBytesSync(list);
    return tempDocumentPath;
  }
}

Replace Future<void> downloadFile(StorageReference ref) async with this code:

Future<void> downloadFile(StorageReference ref) async {
  final String url = await ref.getDownloadURL();
  final http.Response downloadFile = await http.get(url);
  final Directory systemTempDir = Directory.systemTemp;
  final File tempFile = File('${systemTempDir.path}/tmp.pdf');
  if (tempFile.existsSync()) {
    await tempFile.delete();
  }
  await tempFile.create();
  final StorageFileDownloadTask task = ref.writeToFile(tempFile);
  final int byteCount = (await task.future).totalByteCount;
  var bodyBytes = downloadFile.bodyBytes;
  final String name = await ref.getName();  
  final String path = await ref.getPath();
  print(
    'Success!\nDownloaded $name \nUrl: $url'
        '\npath: $path \nBytes Count :: $byteCount',
  );
  final String title = 'Displaying PDF';
  PdfUtilities pdf = new PdfUtilities(path, context);
  pdf.prepareTestPdf().then(writeCounter(await bodyBytes),
        (path) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => DisplayPDF(path, title),
        ),
      );
    },
  );
}
Future<File> writeCounter(Uint8List stream) async {
  final file = await _localFile;

  // Write the file
  return file.writeAsBytes(stream);
}