Image wait不会等到文件下载在flatter中完成

在我的应用程序中，我从URL下载图像，然后将其保存在本地目录中。然后运行下一次迭代/下一个应用程序，应用程序将从本地目录获取它

我从URL下载一个文件，如下所示：

Future<Uint8List> getImageFromCloud(String url) async {

   final response = await Client().get(url);

   return response.bodyBytes;
}

 static Future<File> saveFileAsBytes(Uint8List bytes, String path, String filename) async {
    // Getting App's local directory
    final Directory localRootDirectory = await getApplicationDocumentsDirectory();

    final String filePath = p.join(localRootDirectory.path, path, filename);

    final file = await File(filePath).create(recursive: true);

    final imageFile = await file.writeAsBytes(bytes);

    return imageFile;
  }

Stream<PageState> initializeBloc(String url) async* {
   final bytes = await getImageFromCloud(url);
   final imageFile = await saveFileAsBytes(bytes, path, filename);

   yield PageReadyState(imageFile);

}

Widget onPageReadyState(PageReadyState state) {
   
// -- Some code

   CircleAvatar(
      backgroundImage: FileImage(state.imageFile),
   );

// -- Some code

}


@override
Widget build(BuildContext context) => 
   BlocBuilder<PageBloc, PageState>(builder: (context, state) {

      if (state is PageUninitializedState) {
        return onPageUninitializedState();
      } else if (state is PageReadyState) {
        return onPageReadyState(state);
      } else return onLoadingPage();
}      

未来getImageFromCloud（字符串url）异步{ 最终响应=等待客户端（）.get（url）； 返回response.bodyBytes； } 然后我将下载的字节保存到如下文件中：

Future<Uint8List> getImageFromCloud(String url) async {

   final response = await Client().get(url);

   return response.bodyBytes;
}

 static Future<File> saveFileAsBytes(Uint8List bytes, String path, String filename) async {
    // Getting App's local directory
    final Directory localRootDirectory = await getApplicationDocumentsDirectory();

    final String filePath = p.join(localRootDirectory.path, path, filename);

    final file = await File(filePath).create(recursive: true);

    final imageFile = await file.writeAsBytes(bytes);

    return imageFile;
  }

Stream<PageState> initializeBloc(String url) async* {
   final bytes = await getImageFromCloud(url);
   final imageFile = await saveFileAsBytes(bytes, path, filename);

   yield PageReadyState(imageFile);

}

Widget onPageReadyState(PageReadyState state) {
   
// -- Some code

   CircleAvatar(
      backgroundImage: FileImage(state.imageFile),
   );

// -- Some code

}


@override
Widget build(BuildContext context) => 
   BlocBuilder<PageBloc, PageState>(builder: (context, state) {

      if (state is PageUninitializedState) {
        return onPageUninitializedState();
      } else if (state is PageReadyState) {
        return onPageReadyState(state);
      } else return onLoadingPage();
}      

static Future saveFileAsBytes（Uint8List字节、字符串路径、字符串文件名）异步{
//正在获取应用程序的本地目录
最终目录localRootDirectory=await getApplicationDocumentsDirectory（）；
最终字符串filePath=p.join（localRootDirectory.path，path，filename）；
最终文件=等待文件（filePath）.create（递归：true）；
final imageFile=等待文件.writeAsBytes（字节）；
返回图像文件；
}

页面状态由如下组处理：

Future<Uint8List> getImageFromCloud(String url) async {

   final response = await Client().get(url);

   return response.bodyBytes;
}

 static Future<File> saveFileAsBytes(Uint8List bytes, String path, String filename) async {
    // Getting App's local directory
    final Directory localRootDirectory = await getApplicationDocumentsDirectory();

    final String filePath = p.join(localRootDirectory.path, path, filename);

    final file = await File(filePath).create(recursive: true);

    final imageFile = await file.writeAsBytes(bytes);

    return imageFile;
  }

Stream<PageState> initializeBloc(String url) async* {
   final bytes = await getImageFromCloud(url);
   final imageFile = await saveFileAsBytes(bytes, path, filename);

   yield PageReadyState(imageFile);

}

Widget onPageReadyState(PageReadyState state) {
   
// -- Some code

   CircleAvatar(
      backgroundImage: FileImage(state.imageFile),
   );

// -- Some code

}


@override
Widget build(BuildContext context) => 
   BlocBuilder<PageBloc, PageState>(builder: (context, state) {

      if (state is PageUninitializedState) {
        return onPageUninitializedState();
      } else if (state is PageReadyState) {
        return onPageReadyState(state);
      } else return onLoadingPage();
}      

Stream initializeBloc（字符串url）异步*{
最终字节=等待getImageFromCloud（url）；
final imageFile=等待saveFileAsBytes（字节、路径、文件名）；
生成PageReadyState（图像文件）；
}

在页面的代码后面，我们将图像文件用于CircleAvatar，如下所示：

Future<Uint8List> getImageFromCloud(String url) async {

   final response = await Client().get(url);

   return response.bodyBytes;
}

 static Future<File> saveFileAsBytes(Uint8List bytes, String path, String filename) async {
    // Getting App's local directory
    final Directory localRootDirectory = await getApplicationDocumentsDirectory();

    final String filePath = p.join(localRootDirectory.path, path, filename);

    final file = await File(filePath).create(recursive: true);

    final imageFile = await file.writeAsBytes(bytes);

    return imageFile;
  }

Stream<PageState> initializeBloc(String url) async* {
   final bytes = await getImageFromCloud(url);
   final imageFile = await saveFileAsBytes(bytes, path, filename);

   yield PageReadyState(imageFile);

}

Widget onPageReadyState(PageReadyState state) {
   
// -- Some code

   CircleAvatar(
      backgroundImage: FileImage(state.imageFile),
   );

// -- Some code

}


@override
Widget build(BuildContext context) => 
   BlocBuilder<PageBloc, PageState>(builder: (context, state) {

      if (state is PageUninitializedState) {
        return onPageUninitializedState();
      } else if (state is PageReadyState) {
        return onPageReadyState(state);
      } else return onLoadingPage();
}      

小部件onPageReadyState（PageReadyState状态）{
//--一些代码
圆形(
背景图片：FileImage（state.imageFile），
);
//--一些代码
}
@凌驾
小部件构建（构建上下文）=>
BlocBuilder（生成器：（上下文，状态）{
如果（状态为PageUninitializedState）{
返回onPageUninitializedState（）；
}else if（状态为PageReadyState）{
返回onPageReadyState（状态）；
}否则返回onLoadingPage（）；
}      

但这总是会崩溃，出现异常：无效的图像数据。 这很奇怪，因为该集团一直在等待本地下载和写入文件的过程完成，然后才产生

PageReadyState

状态

然后我发现从

getImageFromCloud

返回的文件大小不是它的完整大小（在一个例子中是106，而完整文件大小是21480）。因此导致了

CircleAvatar

崩溃

然后我第二次运行该应用程序，这次我从本地读取了相同的文件（因为它是在第一次运行时下载的），并且文件以其完整大小存在。这意味着第一次下载文件时，当函数将文件对象返回到

CircleAvatar

时，下载仍在后台进行，即使我在这里使用了

wait

关键字。当然，第二次，文件已经存在t在本地目录中，因此没有崩溃

我希望解释清楚

那么你知道我在这里遗漏了什么吗？为什么

await

在从函数返回之前不等待整个文件下载完成

---

注意：使用不同大小的不同图像文件进行测试，它在第一次下载时总是返回大小为106的文件

getImageFromCloud（）方法正在返回Future，但未标记为async？很抱歉，在编写此问题时出现了错误，键入错误。但实际代码中有

async

。问题已修复