为什么在flutter web中实现进度指标百分比

Question

当文件在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);
}
});

}

Answer 1

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