将动画控制器值显示为 Flutter 中的列表视图构建器项

Question

您好，我正在使用带进度条的 https 构建文件上传到服务器在 LinearProgressIndicator 中上传带有百分比的图像工作正常。

我的问题是我想显示该索引的动画控制器值。

这是我的工作代码。

     Map<int, double> fileDownloadProgress = {};
    late AnimationController loadingController;

 @override
  void initState() {
    super.initState();
    var docProvider = Provider.of<DocProviderBLoC>(context, listen: false);
    docProvider.getDocumentList();
    loadingController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 10),
    )..addListener(() {
        setState(() {});
      });
  }

ListView.builder(
                    itemCount: doc.getDocument.length + 1,
                    physics: const BouncingScrollPhysics(),
                    shrinkWrap: true,
                    itemBuilder: (ctx, index) {
                      progress = downloadProgress[index];
                      if (index == 0) {
                        return InkWell(
                          onTap: () => _getUserSelfie(index),
                          child: DocumentsWidget(
                            fileName:
                                AppLocalizations.of(context)!.upload_selfie,
                            percentage: progress,
                          ),
                        );
                      } else {
                        fileProgress = fileDownloadProgress[index - 1];
                        return GestureDetector(
                          onTap: () => _showBottomFilePicker(index - 1, doc),
                          child: DocumentsWidget(
                            fileName: doc.docData[index - 1].name,
                            percentage: fileProgress,
                          ),
                        );
                      }
                    },
                  )

上传文件到服务器的方法：

 _asyncFileUpload(String text, File file, int i, DocProviderBLoC doc) async {
  byteCount += data.length;

        // debugPrint(
        //     'Total ByteCount => $byteCount  and totalByteLength  =>  $totalByteLength');

        var percentage = byteCount / totalByteLength * 100;
        loadingController.forward();

  setState(() {
          valuePercentage = percentage / 100;
          fileDownloadProgress[i] = valuePercentage;
          debugPrint('downloadProgress => ${fileDownloadProgress[i]}');
        });
}

Answer 1

要解决此问题，您需要将动画控制器值分配给文件进度。

if (fileProgress != null) {
    fileProgress = loadingController.value;
}

将动画控制器值显示为 Flutter 中的列表视图构建器项

Show Animation Controller value to list-view builder item in Flutter

flutter

progress-bar

flutter-animation