FlutterでDrawerがシステムバーとだけ被らないようにする

ピン留めされたアイテム

welchi 2020/12/27

結論としては、SafeAreaでbottom:をfalseにしておけば、システムバー部分にだけSafeAreaが適用される。

drawer: SafeArea(
        bottom: false,
        child: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              // DrawerHeader(child: Text('')),
              ListTile(
                leading: const Icon(Icons.inbox_rounded),
                title: const Text('インボックス'),
                onTap: () {},
              ),
              ListTile(
                leading: const Icon(Icons.event_rounded),
                title: const Text('近日予定'),
                onTap: () {},
              )
            ],
          ),
        ),

welchi 2020/12/27に更新

SafeArea無しでDrawerを使うと、iPhoneX等でシステムバー内要素(現時刻やバッテリー)とDrawer内要素が被ってしまう。

Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              // DrawerHeader(child: Text('')),
              ListTile(
                leading: const Icon(Icons.inbox_rounded),
                title: const Text('インボックス'),
                onTap: () {},
              ),
              ListTile(
                leading: const Icon(Icons.event_rounded),
                title: const Text('近日予定'),
                onTap: () {},
              )
            ],
          ),
        ),

welchi 2020/12/27に更新

かといってSafeAreaで囲むと、次のようにDrawer下部まで切り取ってしまう。