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

Posted 2023-02-24

【中文标题】在 Flutter 循环进度指示器中显示下载百分比

【英文标题】：Show download percentage in the Flutter Circular Progress Indicator

【发布时间】：2020-12-02 09:18:59

【问题描述】：

我正在使用 Flutter advance_pdf_viewer 包来显示从 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,
          ),
        ),
      ),
    );
  

【问题讨论】：

试试这个***.com/a/60717614/11404883

【参考方案1】：

您可以通过在CircularProgressIndicator 中指定 value 属性来做到这一点，如下所示：

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

【参考方案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