下面我们可以改进一下这个选择文件用的小部件，打开 post_create_media.dart，先剪切一下之前在这个添加的这个选择文件用的方法，然后在 build 方法里面，再去定义一个方法，名字叫 selectFile，把剪切的方法交给它。

再修改一下小部件，用一个 Container 小部件，设置一下 padding ，值是 EdgeInsets.symmetric ，vertical 是 24，垂直方向添加 24 的边距。这个 Container 的 child 可以用一个 Stack 小部件显示一堆小部件，把它的 alignment 设置成 Alignment.center。

children 的值是一组小部件，里面先添加一个 imagePlaceholder，在 build 方法里面，再添加一个 imagePlaceholder ，它的值可以用一个 AspectRatio 小部件，用 aspectRatio 参数设置一下显示比例，设置成 3/2 ，它的 child 用一个 Container 小部件，设置一下 decoration ，值是一个 BoxDecoration ，用 color 设置一下这个容器的背景颜色，Colors.black12。

保存一下文件，如果出现错误可以打开调试，重新启动一下。

然后继续再编辑这个 ImagePlaceholder，再添加一个 borderRadius 装饰，值是 BorderRadius.circular，大小是 10 。给容器添加点圆角效果。

再设置一下这个 Container 的 child，用一个 Icon 小部件，值是 Icons.add_a_photo_outlined，小图标的 size 设置成 56，小图标的 color 设置成 Colors.black12。

imagePlaceholderMask

点按它的时候要选择图像文件，下面可以再定义一个 imagePlaceholderMask， 值是 Positioned.fill ，它的 child 用一个 InkWell 小部件，用 borderRadius 设置一下圆角，值可以用一下 BorderRadius.circular 。

再用 splashColor 设置一下溅墨效果的颜色，Colors.deepPurpleAccent.withOpacity ，0.3 。下面再用 onTap 设置一下点按回调。

这里需要用到一个东西，在 build 方法里面，声明一个 postCreateModel ，值可以用一下 context.read，类型是 PostCreateModel。在文件的顶部需要导入一个包，package:provider/provider.dart。

这个 onTap 的值，可以判断一下 postCreateModel.loading ? 如果是 true 这里就是 null ，如果是 false，这里可以用一下 selectFile 。

在 Stack 小部件的 children 里面，添加一个 imagePlaceholderMask，注意要把它放在 imagePlaceholder 的下面。

测试

现在按一下这个图像占位符，会弹出选择图像文件的窗口。选择了图像以后可以在界面上显示被选择的图像。

selectedImage

在 build 方法里声明一个 selectedImage，它的值判断一下 postCreateModel.selectedFile 不等于 null ，如果不等于 null ，这里可以用一个 ClipRRect，不然的话就是 null。

这里可以用 borderRadius 添加点圆角，BorderRadius.circular，10 。child 是一个 Image.file，给它提供一个文件，用一下 File，注意这个 File 来自 dart:io 这个包，把文件的路径交给这个 File，这里就是 postCreateModel.selectedFile!.path 。

提示了一个错误，去掉 ! 号后面的空格。

然后在 Stack 的 children 里面，在 imagePlaceholder 的下面，判断一下 selectedImage 不等于 null， 满足条件就添加一个 selectedImage，显示被选择的图像。

selectFile

找到 selectFile 这个方法，修改一下，如果选择的结果不是 null，这里可以执行一下 postCreateModel.setSelectedFile，值是 result.files.first，也就是选择的第一个文件。

测试

最后再测试一下，按一下图像占位符，在照片里选择一个图像文件，这次被选择的图像会显示在应用的界面上。