在 Flutter 循环进度指示器中显示下载百分比

Question

我正在使用 Flutter advance_pdf_viewer package 来显示从 URL 加载的 PDF 个文件。第一次打开时，PDF 个文件在应用程序缓存中下载，下次从缓存中加载。 现在我使用 CircularProgressIndicator() 来显示下载进度。 我想在这里添加进度百分比，让用户更好地了解进度。 我怎样才能做到这一点？

这是我的代码：

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

您可以通过在CircularProgressIndicator中指定 value 属性来实现，如下所示：

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

Answer 2

你可以使用flutter_cached_pdfview

这是一个从 URL 查看 pdf 并使用占位符缓存它的示例
你可以用 CircularProgressIndicator 之类的任何小部件替换占位符

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

看看https://pub.dev/packages/flutter_cached_pdfview