时间戳

首页 > 解决方案 > 如何在 Flutter 中的下载功能中添加进度条

flutter - 如何在 Flutter 中的下载功能中添加进度条

问题描述

我正在从服务器下载 PDF 并将其存储到本地存储中。现在，当我当时打开屏幕时，它从 URL 流式传输并显示 CircularProgressIndicator。但是当我点击下载时，我想制作加载小部件，我可以在其中显示下载进度。而这 2 个进度条需要单独工作。我怎样才能做到这一点？

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
              flex: 10,
              child: _isLoading   // This is for locading from URL
                  ? CircularProgressIndicator()
                  : PDFViewer(document: doc),
            ),
          ],
        ),
      ),

这就是我从 url 下载 PDF 并存储到本地存储的方式。

await dio.download(
        widget.urlName,
        pathBookForDB,
        onReceiveProgress: (count, total) => {
          setState(() {
            valDownload = ((count / total) * 100).toString();
          })
        },
      );

标签： flutterdartprogress-bar

解决方案

您可以使用颤振 pub percent_indicator

在正文中包含以下代码。

LinearPercentIndicator(
    width: 140.0,
    lineHeight: 14.0,
    percent: 0.5,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
    ),

对于您的代码，您可以如下所示。

  _isLoading // This is for locading from URL
      ? Padding(
        padding: EdgeInsets.all(15.0),
        child: new LinearPercentIndicator(
        width: 170.0,
        animation: true,
        animationDuration: 1000,
        lineHeight: 20.0,
        leading: new Text("left content"),
        trailing: new Text("right content"),
        percent: 0.99,
        center: Text("99.0%"),
        linearStrokeCap: LinearStrokeCap.butt,
        progressColor: Colors.red,
       ),
     )
       : Container(),

推荐阅读