像ChatGPT Android App一样创建全屏背景色的Flutter抽屉

Question

我正在尝试实现一个类似于 ChatGPT Android 应用程序的 Flutter 抽屉，旨在实现覆盖顶部状态栏和底部任务栏的全屏背景颜色。然而，我在实现这种效果时遇到了困难。尽管尝试了各种方法，例如调整抽屉小部件和颜色属性，但我无法复制所需的结果。任何关于如何在整个屏幕上无缝扩展抽屉背景颜色（包括状态栏和任务栏）的见解或代码片段将不胜感激。谢谢！

我尝试使用 SystemChrome.setSystemUIOverlayStyle 更改状态栏和底部任务栏的颜色，但没有达到预期的效果。我也尝试过使用 Scaffold 小部件作为抽屉，但它仍然不起作用。

Answer 1

在 Scaffold 小部件中使用您的自定义抽屉

`drawer: ContainerDrawer(),

像Container一样自定义内容、背景颜色、宽度等。

class ContainerDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Color drawerBackgroundColor = Colors.teal;

    return Container(
      color: drawerBackgroundColor,
      child: Column(
        children: [
          DrawerHeader(child: Text('Drawer Header')),
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
          // Add more list items or content as needed
        ],
      ),
    );
  }
}