【Flutter】キーボードを表示すると画面が重なってエラーになったから SingleChildScrollView を使って解決した

## ■ はじめに

### **説明**
テキストフィールドをクリックし、キーボードを表示した際、エラーが出たのでそれの解決策を備忘録がてらまとめました。
問題のある状態（コード+画像）と解決した状態（コード+画像+動画）を用意したので、参考にしていただければと思います。
又、コードや説明に誤りなどございましたらご指摘願います。

### **環境**

- Macbook Air M2 sonoma(14.0)
- Dart : 3.2.3
- Flutter : 3.16.5

## ■ 本題

### 現状だと問題があるコード
以下のコードだと、テキストボックスをクリックし、キーボードを表示した際、エラーが出ます。
これは、キーボードとテキストボックスが被さっているので、怒られている状態です。

```dart
body:
    Container(
      width: double.infinity,
      child: Column(
        children: [
          const SizedBox(height: 40,),
          const CircleAvatar(
            radius: 40,
            child: Icon(Icons.add),
          ),
          Container(
            width: 300,
            child: TextField(
              decoration: const InputDecoration(hintText: '名前'),
              controller: nameController,
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 40.0),
            child: Container(
              width: 300,
              child: TextField(
                decoration: const InputDecoration(hintText: 'ほにゃらら'),
                controller: useridController,
              ),
            ),
          ),
          Container(
            width: 300,
            child: TextField(
              decoration: const InputDecoration(hintText: 'ほにゃらら'),
              controller: selfIntroductionController,
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 50.0),
            child: Container(
              width: 300,
              child: TextField(
                decoration: const InputDecoration(hintText: 'ほにゃらら'),
                controller: emailController,
              ),
            ),
          ),
          Container(
            width: 300,
            child: TextField(
              decoration: const InputDecoration(hintText: 'ほにゃらら'),
              controller: passwordController,
            ),
          ),
        ],
      ),
    ),

```

- テキストボックス表示前
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/f3d70661-6e0f-eb81-0d26-53a0c5583dcf.png)

- テキストボックス表示後
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/68a7693b-7657-6f51-df8f-3f4606e6a2bd.png)


### 解決したコード
SingleChildScrollView という Widget を使いましょう。
スクロール出来るようになるので、テキストボックスを表示させてもエラーになりません。
公式ドキュは、こちらに置いておきます。

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

- コード
    
```dart
body:
    SingleChildScrollView(. // これ！
      child: Container(
        width: double.infinity,
        child: Column(
          children: [
            const SizedBox(height: 40,),
            const CircleAvatar(
              radius: 40,
              child: Icon(Icons.add),
            ),
            Container(
              width: 300,
              child: TextField(
                decoration: const InputDecoration(hintText: '名前'),
                controller: nameController,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 40.0),
              child: Container(
                width: 300,
                child: TextField(
                  decoration: const InputDecoration(hintText: 'ほにゃらら'),
                  controller: useridController,
                ),
              ),
            ),
            Container(
              width: 300,
              child: TextField(
                decoration: const InputDecoration(hintText: 'ほにゃらら'),
                controller: selfIntroductionController,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 50.0),
              child: Container(
                width: 300,
                child: TextField(
                  decoration: const InputDecoration(hintText: 'ほにゃらら'),
                  controller: emailController,
                ),
              ),
            ),
            Container(
              width: 300,
              child: TextField(
                decoration: const InputDecoration(hintText: 'ほにゃらら'),
                controller: passwordController,
              ),
            ),
          ],
        ),
      ),
    ),

```

- テキストボックス表示前
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/8477a46c-f281-0b31-55d0-0853f5ae9cab.png)

- テキストボックス表示後
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/e2ef1e1e-e7c4-b0c1-89e3-9c133abbfeb8.png)

一応動画バージョンも置いておきます。(GIF)
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/ea122cad-2bbb-3859-a10d-4a9e561deebb.gif)


以上。