【flutter】横から失礼します。Drawerを使ってサイドバーを表示したいです、、、

こんにちは！
最近気温も下がってきて、過ごしやすい気温となりましたね！
皆さんも体調管理に気をつけて過ごしてください！
今回はDrawer widgetを使ってサイドバーを表示する方法について紹介します！
最後まで読んでいただけたら嬉しいです！

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/e0501c12-331f-171b-06ad-8ea0af5acf47.gif)


## 1,Drawer widgetって何？
Drawerは典型的なサイドメニューを実装するためのwidgetです。Drawerは通常、画面の左端または右端からスワイプまたはボタンのタップなどのアクションで開閉できる、非常に一般的なユーザーインターフェース要素です。

Drawer widgetを使うと、アプリケーションのメインコンテンツ（例：ホーム画面やコンテンツ画面）の横に隠れたメニューを表示し、ユーザーがアプリケーションのさまざまな機能やナビゲーションオプションにアクセスできるようになります。Drawerは、アプリケーションのユーザーエクスペリエンスを向上させ、ナビゲーションを簡素化するのに役立ちます。

## 2,実際に実装してみた結果

```php
Drawer(
          child: ListView(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 36),
            children: [
              ListTile(
                title: const Text("りんご",
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w400,
                    )),
                onTap: () {},
              ),
              ListTile(
                title: const Text("ぶどう",
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w400,
                    )),
                onTap: () {},
              ),
              ListTile(
                title: const Text("いちご",
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w400,
                    )),
                onTap: () {},
              ),
              ListTile(
                title: const Text("バナナ",
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w400,
                    )),
                onTap: () {},
              ),
            ],
          ),
        )
```

![darwer.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/54882b42-5af9-bb61-d03e-0432cf921316.gif)


## 3,ボタンなしでwebで表示したい場合

```php
body: Row(children: [
          MediaQuery.of(context).size.width > 500
            // ウィンドウの幅が500以上の場合にDrawer（サイドメニュー）を表示します。
            // この条件は、ウィンドウの幅が500未満の場合には何も表示しないようにします。
              ? Drawer(
                  width: 200,
                  backgroundColor: Colors.blue,
                  child: ListView(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 36),
                    children: [
                      ListTile(
                        title: const Text("りんご",
                            style: TextStyle(
                              fontSize: 15,
                              fontWeight: FontWeight.w400,
                            )),
                        onTap: () {},
                      ),
                      ListTile(
                        title: const Text("ぶどう",
                            style: TextStyle(
                              fontSize: 15,
                              fontWeight: FontWeight.w400,
                            )),
                        onTap: () {},
                      ),
                      ListTile(
                        title: const Text("いちご",
                            style: TextStyle(
                              fontSize: 15,
                              fontWeight: FontWeight.w400,
                            )),
                        onTap: () {},
                      ),
                      ListTile(
                        title: const Text("バナナ",
                            style: TextStyle(
                              fontSize: 15,
                              fontWeight: FontWeight.w400,
                            )),
                        onTap: () {},
                      ),
                    ],
                  ),
                )
              : Container(),
          Expanded(,,,,,
```


![スクリーンショット 2023-11-03 20.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/7785c8fb-72c7-0f1a-12e7-c4c2be73ab5d.png)


## 4,終わりに
以上で、Drawer widgetを使ってサイドバーを表示する方法についての紹介を終わります！
今回も最後まで読んでいただき、ありがとうございました！
ではまた、次の記事で〜！