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

■ はじめに

説明

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

環境

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

■ 本題

現状だと問題があるコード

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

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,
            ),
          ),
        ],
      ),
    ),

• テキストボックス表示前
  

• テキストボックス表示後
  

解決したコード

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

• コード

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,
              ),
            ),
          ],
        ),
      ),
    ),

• テキストボックス表示前
  

• テキストボックス表示後
  

一応動画バージョンも置いておきます。(GIF)

以上。