为什么要在 Flutter Web 中实现进度指示器百分比？答案

【问题标题】：Why implement Progress Indicator percentage in flutter web?为什么要在 Flutter Web 中实现进度指示器百分比？
【发布时间】：2022-01-18 13:33:20
【问题描述】：

当文件在 Flutter Web 中加载时，我需要实现一个进度指示器百分比。

目前百分比仅在读取完成时呈现，而不是在读取时呈现。

我看到了很多如何做到这一点的例子，但不幸的是我没有找到一个允许它从 Flutter Web 完成的例子。

我真正想做的是显示进度，然后将数据渲染到表格中，但是当文件被完全读取时，只会渲染表格和百分比。

这是一段代码

Future _startFilePicker() async {
var bytes = <int>[];
FileUploadInputElement uploadInput = FileUploadInputElement();
uploadInput.click();

uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files!.length == 1) {
    File file = files[0];
    FileReader reader = FileReader();

    bytes =
        Base64Decoder().convert(reader.result.toString().split(",").last);

    reader.onLoadEnd.listen((e) {
      uploadedCsv =
          Base64Decoder().convert(reader.result.toString().split(",").last);
      rowsAsListOfValues =
          const CsvToListConverter().convert(utf8.decode(uploadedCsv!));
  
      for (var value in rowsAsListOfValues) {
        list.add(UsersCsv.fromList(value));
      }
      setState(() { // here will be update de widget           
       for (int i = 1; i <= bytes.length; i++) {
            this.progress = ((i) / bytes.length);
        
      });
    });

    reader.onError.listen((fileEvent) {
      setState(() {
        option1Text = "Some Error occured while reading the file";
        print(option1Text);
        errorView = true;
      });
    });

    reader.readAsDataUrl(file);
  }
});

}

【问题讨论】：

标签： flutter file web progress

【解决方案1】：

https://www.youtube.com/watch?v=5AxWC49ZMzs 像解析这样的繁重进程可能会停止渲染进程，因为异步函数没有自己的线程。尝试隔离解决方案

【讨论】：