How to use the SingleChildScrollView() in flutter

I’m trying to use the SingleChildScrollView() method to wrap a column to stop it from overflowing when the keyboard pops up but now the whole page is not rendering.
here’s the code:

import 'package:flutter/material.dart';

import '../widgets/text_field_input.dart';

class SignUpScreen extends StatefulWidget {
  const SignUpScreen({Key? key}) : super(key: key);

  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final TextEditingController _emailcontroller = TextEditingController();
  final TextEditingController _passwordcontroller = TextEditingController();
  final TextEditingController _usernamecontroller = TextEditingController();
  final TextEditingController _biocontroller = TextEditingController();
  @override
  void dispose() {
    super.dispose();
    _emailcontroller.dispose();
    _passwordcontroller.dispose();
    _usernamecontroller.dispose();
    _biocontroller.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      // resizeToAvoidBottomInset: false,
      // backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          // color: Colors.black,
          padding: const EdgeInsets.symmetric(horizontal: 32),
          width: double.infinity,


          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                //logo
                // SvgPicture.asset("assets/icon_oinkgram.svg",height: 64,color: Colors.pink.shade200,)
                Flexible(
                  child: Container(),
                  flex: 1,
                ),
                Image.asset(
                  "assets/logo_oinkgram1.png",
                  height: 32,
                ),
          
                const SizedBox(height: 32),
                Stack(
                  children: [
                    const CircleAvatar(
                      radius: 64,
                      backgroundImage: NetworkImage(
                          "https://wallpapers.com/images/hd/waving-technoblade-anime-fan-art-xjz8fyxbzakvitgq.jpg"),
                    ),
                    Positioned(
                      bottom: -15,
                      left :90,
                      child: IconButton(
                        onPressed: () {},
                        icon: const Icon(
                          Icons.add_a_photo,
                        ),
                      ),
                    ),
                  ],
                ),
          
                //EMAIL
                const SizedBox(height: 32),
                TextFieldInput(
                    textEditingController: _usernamecontroller,
                    hintText: "Enter a username",
                    textInputType: TextInputType.text),
          
                const SizedBox(height: 24),
          
                TextFieldInput(
                    textEditingController: _emailcontroller,
                    hintText: "Enter you Email",
                    textInputType: TextInputType.emailAddress),
          
                const SizedBox(height: 24),
          
                //PASSWORD
                TextFieldInput(
                    textEditingController: _passwordcontroller,
                    hintText: "Enter your password",
                    isPass: true,
                    textInputType: TextInputType.text),
                const SizedBox(
                  height: 24,
                ),
          
                TextFieldInput(
                    textEditingController: _biocontroller,
                    hintText: "write a bio to express yourself",
                    textInputType: TextInputType.text),
          
                const SizedBox(height: 24),
          
                InkWell(
                  child: Container(
                    child: const Text("Sign up"),
                    width: double.infinity,
                    alignment: Alignment.center,
                    padding: const EdgeInsets.symmetric(vertical: 12),
                    decoration: const ShapeDecoration(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4)),
                      ),
                      color: Colors.blue,
                    ),
                  ),
                ),
                const SizedBox(
                  height: 12,
                ),
                Flexible(
                  child: Container(),
                  flex: 1,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      child: const Text("Already have an account?"),
                      padding: const EdgeInsets.symmetric(vertical: 8),
                    ),
                    GestureDetector(
                      onTap: () {},
                      child: Container(
                        child: const Text(
                          " Sign in",
                          style: TextStyle(
                              color: Colors.blue, fontWeight: FontWeight.bold),
                        ),
                        padding: const EdgeInsets.symmetric(vertical: 8),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I keep getting errors along the lines:
RenderPhysicalModel object was given an infinite size during layout.

edit: 1 :
tried wrapping with expanded
returned the same errors:

Errors image

Any suggestions on what ought to be changed?