BottomSheet 就是从屏幕底部滑动显示出来一层东西 .. 在 BottomSheet 上面，你可以添加任何你想显示的东西 .. 一般触发显示 BottomSheet 可以使用 ScaffoldState 上面的 showBottomSheet 这个方法 .. 要使用这个方法，可以先去创建一个 GlobalKey .. 用它可以引用对应的 Scaffold ..

在这个 BottomSheet 的演示里面，先添加一个 _bottomSheetScaffoldKey .. 它的值应该是一个 GlobalKey ，类型是 ScaffoldState ... 然后把创建的这个 key 交给 scaffold .. 里面添加一个 key 属性 .. 对应的值就是 _bottomSheetScaffoldKey ..

然后在屏幕上显示一个按钮 .. 用一下 FlatButton .. 设置一下按钮上面的文字 .. Open BottomSheet .. 按一下这个按钮会执行 onPressed ... 使用 _openBottomSheet 来处理 ..

上面再去定义一下这个方法 .. 名字是 _openBottomSheet .. 里面可以再用一下刚才创建的 Scaffold Key .. 名字是 _bottomSheetScaffoldKey ..

它上面的 currentState ... 里面有个 showBottomSheet 方法，我们要给这个方法提供一个 WidgetBuilder ，就是去创建要在 BottomSheet 上显示的小部件 .. 方法接收一个 BuildContext 类型 context 参数 .. 方法 return 的东西是个 Widget ..

这个小部件你可以根据自己的需求去设置 .. 这里我用一个 BottomAppBar .. 它的 child 是个 Container ... 里面可以用一个 height 设置一下这个容器的高度 ... 大小是 90.0 ..

然后把它的 width 设置成 double.infinity .. 再设置一下这个 Container 的 child .. 它的值是个 Row .. 在 Row 的 children 属性里面可以添加一组小部件 ..

先添加一个 Icon .. 显示一个小图标 .. Icons.pause_circle_outline .. 下面再用一个 SizedBox .. 设置一下它的 width 属性 .. 大小是 16.0 ..

然后是一个 Text .. 里面添加点要显示的文字 .. 接着可以再用一个 Expanded 小部件 .. 它的 child 是一个 Text .. 输入点要显示的文字 .. 然后把 textAlign ，文字的对齐方式设置成 TextAlign.right ... 右对齐 ..

下面可以再到模拟器上预览一下 .. 按一下屏幕上的 Open BottomSheet .. 屏幕底部弹出来的东西就是 BottomSheet ..

在 BottomSheet 显示出来的时候，我们可以继续使用屏幕上的东西 ..

按一下 AppBar 上的这个返回按钮可以关闭 BottomSheet ...

或者也可以把它拖到下面 .. 这样也会关闭这个 BottomSheet ..