[Flutter]DrawerでiOSのノッチ部分まで塗り潰す方法

2020年9月1日

はじめに

FlutterでDrawerを使用した際、DrawerHeaderに背景色を設定したのですが、iOSのノッチ端末で不自然にノッチ部分が白のままだったのが気持ち悪かったので塗り潰す方法を模索しました。

解決方法

色々やってみたのですが、解決したのは意外と単純な方法。
ListViewのpaddingに以下のようにEdgeInsets.zeroを設定しました。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero, // ←ここ
          children: [
            DrawerHeader(
              child: Text('テスト')
            ),
          ],
       ),
       decoration: BoxDecoration(color: Colors.blue),
     ),
   );
}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(),

drawer: Drawer(

child: ListView(

padding: EdgeInsets.zero, // ←ここ

children: [

DrawerHeader(

child: Text('テスト')

decoration: BoxDecoration(color: Colors.blue),

);

}

解決後の画像はこちら。

以上です。