Add progress bar in flutter when open pdf file from url

Question

I have a problem and I cannot solve it and I did not find a source to solve it on Google, I have a page where I view a PDF file through a link, and I have a CircularProgressIndicator and I want to replace it with a progress bar showing the percentage of downloading the file, can I do that? I have attached my code

import 'package:flutter/material.dart';
import 'package:flutter_plugin_pdf_viewer/flutter_plugin_pdf_viewer.dart';

class ReadPdf extends StatefulWidget {

  final String value;
  ReadPdf({Key key, this.value}) : super(key: key);

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

class _ReadPdfState extends  State<ReadPdf>{
  bool _isloading = false, _isInit = true;
  PDFDocument document;

  @override
  void initState() {

    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(child:Center(
                child: _isInit?  MaterialButton(child: Text('Go'), onPressed: () {_loadFromURL(widget.value);},
                color: Color.fromRGBO(64, 75, 96, .9),
                textColor: Colors.white,
                ) : _isloading? Center(child: CircularProgressIndicator(),) : PDFViewer(document: document,indicatorBackground: Colors.deepPurple,),
              ),),
              Row(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[

                ],
              ),
            ],
          ),
        ),
      ),
    );
  }


  _loadFromURL(String url) async{
    setState(() {
      _isInit = false;
      _isloading = true;
    });
    document = await PDFDocument.fromURL('${url}');    setState(() {
      _isloading = false;
    });

  }


}

Look at https://stackoverflow.com/questions/3028306/download-a-file-with-android-and-showing-the-progress-in-a-progressdialog — this.girish, Feb 19 '20 at 18:03
@this.girish thank you! but how I can get my percentge or can you modify my code to work. — Abdullrahman Wasfi, Feb 19 '20 at 21:06

score 2 · Answer 1 · answered Feb 20 '20 at 07:56

I have an app with the same feature, I used Dio this package supports downloading a file to your phone.

All you need to do is

Dio dio = Dio();
  dio.download("*YOUR URL WHERE YOU WANT TO DOWNLOAD A FILE*",
      "*YOUR DESTINATION PATH*", onReceiveProgress: (rec, total) {
          print("Downloading " + ((rec / total) * 100).toStringAsFixed(0) + "%");
      });

score 1 · Accepted Answer · answered Feb 19 '20 at 23:51

Never used this for pdf, but I've tried it for NetworkImage(). Not sure if it'll help. But you can just try it if there's a way to use loadingBuilder in your code.

Image.network(
  imageUrl,
  fit: BoxFit.cover,
  loadingBuilder: (BuildContext context, Widget child,
      ImageChunkEvent loadingProgress) {
    if (loadingProgress == null)
      return child;
    else {
      return Center(
        child: CircularProgressIndicator(
          value: loadingProgress.expectedTotalBytes != null
              ? loadingProgress.cumulativeBytesLoaded /
                  loadingProgress.expectedTotalBytes
              : null,
        ),
      );
    }
  },
);

score 1 · Answer 3 · answered Sep 09 '20 at 10:50

u can use flutter_cached_pdfview

and this an example to view a pdf from URL and cache it with placeholder
u can replace placeholder with any widget like CircularProgressIndicator

         PDF().cachedFromUrl(
          'http://africau.edu/images/default/sample.pdf',
            placeholder: (progress) => Center(child: Text('$progress %'))
             )

take a look https://pub.dev/packages/flutter_cached_pdfview

Add progress bar in flutter when open pdf file from url

3 Answers3