下面我们再去创建一个用户头像小部件，新建一个文件，放在 lib/user/components 里面，名字是 user_avatar.dart。在这个文件里定义一个小部件，名字是 UserAvatar。

在小部件里面添加一个属性，类型是 PostUser 名字是 user，再添加一个属性，类型是 double，名字是 size。添加一个构造方法，名字是 UserAvatar，添加一个参数，用 required 标记一下，this.user，再添加一个 this.size ，默认值可以设置成 32。

在小部件的 build 方法里面，声明一个 userId ，值是 user.id，再声明一个 avatarUrl ，它的值是用户头像地址，这个地址里面先用一下 AppConfig 里的 apiBaseUrl，后面加上 users，然后是 $userId，再加上一个 avatar ，再用一个 size 查询符设置一下需要的图像尺寸，比如 medium。这个头像地址是我们的服务端应用提供的一个接口地址。

小部件里用一个 Container ，用 width 设置一下宽度，值可以用一下 size，再添加一个 height，值也是 size，也就是这个用户头像小部件里的 size 这个属性的值。这个 Container 的 child 可以用一个 CircleAvatar 小部件，设置一下 backgroundImage，值可以用一个 NetworkImage，给它提供一个图像地址，这里就是上面准备好的 avatarUrl。

post_header.dart

打开 post_header.dart，在这个小部件的 Row 小部件里面用一个 UserAvatar 小部件，把它的 user 设置成 post.user!。 在它下面再添加一个 SizedBox，把 width 设置成 16 。在这个 Row 小部件里面，再用 crossAxisAlignment 设置一下交叉轴的对齐，设置成 CrossAxisAlignment.start。

观察一下应用的界面，现在列表项目里面都会显示这个内容的作者头像。