CircularProgressIndicator in flutter keeps spinning

Question

I am trying to place my CircularProgressIndicator when my flutter app is fetching the PDF from my firebase. But, the weird part is it does not show the CircularProgressIndicator when the button is press to open PDF instead it shows TOGETHER (AT THE SAME TIME) when PDF is loaded which defeats the purpose as I want it to show when it is loading not appearing same time as PDF.

2nd weird thing is, my CircularProgressIndicator keeps on spinning even after PDF is displayed.

Video demo:

My code (PDF VIEWER PAGE):

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:flutter_web_browser/flutter_web_browser.dart';
import 'package:path/path.dart';
import 'dart:async';

openBrowserTab() async {
  await FlutterWebBrowser.openWebPage(
      url:
          "https://docs.google.com/forms/d/e/1FAIpQLScdrUJaGxFCLSJV7Njg8WZlqLZOh40Jq000hggexoRjA1-8nQ/viewform?usp=sf_link",
      customTabsOptions: CustomTabsOptions(
        toolbarColor: Colors.lightBlueAccent,
      ));
}

class PDFViewerPage extends StatefulWidget {
  final File file;

  const PDFViewerPage({
    Key? key,
    required this.file,
  }) : super(key: key);

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


class _PDFViewerPageState extends State<PDFViewerPage> {
  bool isReady = false;
final Completer<PDFViewController> _controller = Completer<PDFViewController>();
  String errorMessage = '';

  @override
  Widget build(BuildContext context) {
    final name = basename(widget.file.path);

    return Scaffold(
      appBar: AppBar(
        title: Text(name),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.error,
              color: Colors.yellow,
            ),
            onPressed: () => openBrowserTab(),
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          PDFView(
            pageSnap: false,
            pageFling: false,
            autoSpacing: false,
            filePath: widget.file.path,
            onRender: (_pages) {
              setState(() {
                isReady = true;
              });
            },
            onError: (error) {
              setState(() {
                errorMessage = error.toString();
              });
              print(error.toString());
            },
            onPageError: (page, error) {
              setState(() {
                errorMessage = '$page: ${error.toString()}';
              });
              print('$page: ${error.toString()}');
            },
              onViewCreated: (PDFViewController pdfViewController) {
              _controller.complete(pdfViewController);
            },
          ),
          errorMessage.isEmpty
              ? !isReady
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : Container()
              : Center(
                  child: Text('Please check your internet connection'),
                ),
        ],
      ),
    );
  }
}

Additional information: I am using this package to view PDF. https://pub.dev/packages/flutter_pdfview/example

Hope to get some guidance from you guys. Thank you!

Answer 1

add this code under the pdfView, you need to change the value of isReady when page render done.

onRender: (_pages) {
              setState(() {
                isReady = true;
              });
            },