下面我们准备一下内容全屏页面底部要显示的一些内容，比如内容的标题，照片信息还有内容作者。

post_show_fullscreen_bottom

打开 post_show_fullscreen_bottom，在 build 里面，先定义一个 title，它的值就是要显示的内容标题。先用一个 Container，里面用 padding 设置一下边距，EdgeInsets.only，bottom 是 8 。容器的 child 可以用一个 Text 小部件，显示的文字是 post 里的 title，再用 style 设置一下文字样式，fontWeight 是 FontWeight.w800， color 设置成上面定义的 textColor ，fontSize 是 18 。

然后修改一下在下面定义的这个 content，容器的 child 换成一个 Column 小部件，设置一下主轴对齐，MainAxisAlignment.start，再把交叉轴对齐设置成 CrossAxisAlignment.start。小部件的 children 里面，先添加一个 title。现在页面上会显示内容的标题。

extra

在 title 的下面，再定义一个 extra，它的值是内容作者头像还有名字。先用一个 Container 小部件，用 padding 设置边距，Edgeinsets.only，bottom 是 8 ，容器的 child 是一个 Row 小部件，小部件的 children 里面，添加一个 UserAvatar 小部件，user 设置成 post.user! ，size 设置成 24。再添加一个 SizedBox ，width 是 8 ，然后再添加一个 Text 小部件，文字是内容作者的名字，post.user!.name! 。然后用 style 设置一下文字样式，把 color 设置成 textColor。

准备好以后，在这个 content 里面，再添加一个 extra 。 现在内容页面上会显示内容作者的头像还有名字。

meta

下面再声明一个 meta，它要显示的就是内容照片相关信息，这里用一下 PostShowFileMetadata 这个小部件，提供一个 post。 然后在 content 里面，把这个 meta 放在 title 还有 extra 的中间。

这在界面上会出现错误，因为 PostShowFileMetadata 是个 sliver 类型的小部件，下面我们可以改造一下它，让它支持几个参数，比如可以用 useSliver 设置是否要使用 Sliver 类型的小部件，这里把它设置成 false。

用 padding 设置一下它的边距，EdgeInsets.only，bottom 是 16。再用 textColor 设置文字颜色，这里可以设置成 textColor。

PostShowFileMetadata

打开这个小部件，改造一下。给它添加几个属性，一个 bool 类型的 useSliver ，一个 EdgeInsetsGeometry ，名字是 padding，再添加一个 Color 属性，名字是 textColor。

然后在构造方法里，添加几个带名字的参数，this.useSliver，默认值是 true，再添加一个 this.padding，然后是 this.textColor。

在小部件的 bulid 里面，声明一个 Widget 类型的东西，名字是 content ，然后把小部件里的这个 GestureDetector 小部件交给这个 content，剪切一下，把它粘贴到 content 这里。

这里需要再修改几个地方，容器的 padding 这里，判断一下 widget.padding 不等于 null，如果是，这里 padding 的值就用一下 widget.padding，不然的话，就是原来我们在这里设置的这个边距。

下面再找到这个 Text 小部件，给它添加一个 style ，值是 TextStyle，设置一下文字的样式，这里用 color 设置文字的颜色，值是 widget.textColor。

剪切一下这个 Row 小部件，我们先用一个 SingleChildScrollView 小部件，用 scrollDirection 把滚动方向设置成 Axis.horizontal ，也就是水平滚动，这样如果要显示的内容超过了屏幕的宽度，就可以滚动显示这块内容了。它的 child 就是刚才我们剪切的这个 Row 小部件。

然后再声明一个 postShowFileMetadata，让它等于这个 content。 下面判断一下，如果 widget.useSliver，重新设置 postShowFileMetadata，先让它等于一个 SliverToBoxAdapter，它的 child 就是 content。

最后让这个小部件 return 这个 postShowFileMetadata。

观察

观察一下应用界面，现在这个内容页面上会显示内容照片相关信息。回到普通模式的内容页面，这里这个照片信息会居中显示，我们可以再调整一下。

在这个 PostShowFileMetadata 里面，找到这个 Column 小部件，设置一下它的交叉轴对齐，CrossAxisAlignment.start 。

再观察一下这个照片信息的显示。