🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

解決済

1回答

1207閲覧

FlutterでDrawerHeaderの上部の空白を消したい

hayato_VTA

総合スコア0

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2020/12/23 10:58

編集2020/12/23 11:07

前提・実現したいこと

Flutterでメモアプリを作成中にサイドメニューを Drwawer を使って実装しようとしていたのですが、 DrawerHeader を使用してサイドメニューのヘッダーを作成しようとすると上部に空白が出てしまいます。

シミュレーターはiOS13.6のiPhone11を使用しています。

該当のソースコード

Flutter

1class SideMenu extends StatelessWidget { 2 Widget build(BuildContext context) { 3 return Scaffold( 4 appBar: AppBar( 5 backgroundColor: AppColors.green, 6 ), 7 drawer: Drawer( 8 child: ListView( 9 children: <Widget>[ 10 DrawerHeader( 11 child: null, 12 decoration: BoxDecoration( 13 color: AppColors.green, 14 ), 15 ), 16 SizedBox(height: 50), 17 ListTile( 18 title: Text( 19 "カテゴリー1", 20 style: AppTextStyle.BoldBlack20, 21 ), 22 trailing: Icon(Icons.arrow_forward), 23 onTap: () { 24 Navigator.pop(context); 25 }, 26 ), 27 ListTile( 28 title: Text( 29 "カテゴリー2", 30 style: AppTextStyle.BoldBlack20, 31 ), 32 trailing: Icon(Icons.arrow_forward), 33 onTap: () { 34 Navigator.pop(context); 35 }, 36 ), 37 ListTile( 38 title: Text( 39 "カテゴリー3", 40 style: AppTextStyle.BoldBlack20, 41 ), 42 trailing: Icon(Icons.arrow_forward), 43 onTap: () { 44 Navigator.pop(context); 45 }, 46 ), 47 ], 48 ), 49 ), 50 ); 51 } 52}

試したこと

backgroundcolor を設定を試しました。しかしこれでは全体の色が変わってしまうのであくまでもヘッダーを上部まで表示させたいです。

英語検索もかけましたが、思った情報は出てきませんでした。(調べ方が悪いからだと思います)

ご教授願います。

自己解決方法

ListView に padding: EdgeInsets.zero, を当てました。
iPhone の上の空白の部分をノッチということを知りませんでした!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

ListView に padding: EdgeInsets.zero, を当てました。
iPhone の上の空白の部分をノッチということを知りませんでした!

投稿2020/12/23 11:08

hayato_VTA

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問