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?

SingleChildScrollView takes in a child of a fixed height. You are using Flexible widget inside Column which doesn't have a fixed height. So, you can give Container a fixed height (MediaQuery.of(context).size.height) to fix the layout height equal to the device height. If the widget overflows this height, then it will automatically become scrollable.

Please go through this for detailed understanding of SingleChildScrollView https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Here is the code for your reference:

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            height: MediaQuery.of(context).size.height,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                //logo
                // SvgPicture.asset("assets/icon_oinkgram.svg",height: 64,color: Colors.pink.shade200,)
                Flexible(child: Container()),

                Column(
                  children: [
                    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()),
                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),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }