Show download percentage in the Flutter Circular Progress Indicator

Question

I am using Flutter advance_pdf_viewer package to show PDF files that are loaded from the URL. At the first time open, The PDF files are downloaded in the application cache and the next time onwards loaded from the cache. Now I am using CircularProgressIndicator() to show the download progress. I want to add the progress percentage here to give the user better visibility of the progress. How can I do that?

Here is my code:

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


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

class _MyBanBook extends State<BanBook> {
  bool _isLoading = true;
  PDFDocument document;

  @override
  void initState() {
    super.initState();
    loadDocument();
  }

  loadDocument() async {
    document = await PDFDocument.fromURL('http://www.africau.edu/images/default/sample.pdf');

    setState(() => _isLoading = false);
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          toolbarHeight: 20,
        ),
        body: Center(
          child: _isLoading
              ? Center(child: CircularProgressIndicator())
              : PDFViewer(
            document: document,
            zoomSteps: 1,
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 85.0,
          ),
        ),
      ),
    );
  }
}

Answer 1

You can do it by specifying the value property in the CircularProgressIndicator like this:

CircularProgressIndicator(
  value: _progress,
  //width of the width of the border
  strokeWidth: 20,
  // color of value
  valueColor: Colors.amber
);

Answer 2

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: CircularProgressIndicator()) )

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