在 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