在页面底部显示一个面板，默认会覆盖在当前页面上，我们可以自己定义在面板上要显示的东西。比如在点按漂浮动作按钮的时候，可以显示一个底部面板。

先去创建一个要在这个底部面板上显示的小部件，在 lib/app/components 下面新建一个文件，名字是 app_bottom_sheet.dart，在这个文件里定义一个小部件，名字叫 AppBottomSheet。

小部件的 build 方法 return 的东西可以用一个 Container，设置一下它的 height，大小是 350，然后再用 decoration 给这个容器添加点装饰，它的值是一个 BoxDecoration，里面用 color 把背景颜色设置成 Theme.of(context)，引用应用的主题样式，用一下 colorScheme 下面的 background 这个颜色。

下面再用 boxShadow 设置一下容器的阴影，一个数组，里面添加一个 BoxShadow，设置一下阴影的 color，Colors.black12，再用 offset 设置一下偏移，它是一个 Offset，x 轴是 0 ，y 轴偏移 -20。 再用 blurRadius 把模糊设置成 30。

然后再设置一下这个 Container 的 child，用一个 Center 小部件，它的 child 是一个  Text 小部件，文字是 AppBottomSheet。

再打开 app_floating_action_button，修改一下 FloatingActionButton 小部件里的 onPressed，点按漂浮动作按钮会执行这个函数。

要显示一个 BottomSheet 可以执行 showBottomSheet 函数，执行它的时候会返回一个控制底部面板用的控制器，这里我们给它起个名字叫 bottomSheetController，执行一下 showBottomSheet，设置一下它的 context 参数，值是 context，再用一个 builder ，用它返回要在底部面板显示的小部件。 返回一个 AppBottomSheet。

在模拟器可以测试一下，点按 漂浮动作按钮，会显示一个 BottomSheet， 在这个底部面板上面显示的就是我们自己定义的 AppBottomSheet 这个小部件。

向下拖拽这个 BottomSheet 可以关闭它。