How to add a spacing with relative height to it's parent in flutter

I want to make the spacing between ‘Please sign in to continue’ and ‘Username’ text field relative to the parent height. As of now it’s fixed to 100. How to achieve this in flutter? Have tried using FractionalSizedBox on the Parent Column view with heightFactor but when keyboard appears, child inside the parent column overflows the parent view.

Here is the code ->

import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    import 'package:reflux_tracker/constants/app_color.dart';
    
    class LoginScreen extends StatefulWidget {
      const LoginScreen({super.key});
    
      @override
      State<StatefulWidget> createState() {
        return _LoginScreenState();
      }
    }
    
    class _LoginScreenState extends State<LoginScreen> {
      // Properties
      String username = "";
      String password = "";
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 30),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text("Hello There",
                            style: GoogleFonts.lato(
                                color: AppColors.primaryColor, fontSize: 34)),
                        const Text(
                          "Please sign in to continue.",
                          style: TextStyle(
                            fontFamily: "RobotoSlab-Light",
                            fontSize: 18,
                            color:
                                AppColors.textColor, // Adjust the color as needed
                          ),
                        ),
                      ],
                    ),
                    Container(height: 100,),  
                    Column(
                      children: [
                        // Username
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextField(
                              decoration: const InputDecoration(
                                labelText: "Username",
                                labelStyle: TextStyle(
                                  fontFamily: "RobotoSlab-Light",
                                  fontSize: 18,
                                  color: AppColors.textColor,
                                ),
                              ),
                              onChanged: (value) {
                                setState(() {
                                  username = value;
                                });
                              },
                            ),
                          ],
                        ),
    
                        // Password
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextField(
                              obscureText: true,
                              decoration: const InputDecoration(
                                labelText: "Password",
                                labelStyle: TextStyle(
                                  fontFamily: "RobotoSlab-Light",
                                  fontSize: 18,
                                  color: AppColors.textColor,
                                ),
                              ),
                              onChanged: (value) {
                                setState(() {
                                  password = value;
                                });
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        TextButton(
                          onPressed: () {
                            // Handle forgot password logic
                          },
                          child: const Text(
                            "Forgot Password?",
                            style: TextStyle(
                              fontFamily: "RobotoSlab-Light",
                              fontSize: 14,
                              color: AppColors.textColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
    
                    // Button
                    GestureDetector(
                      onTap: () {
                        // Handle login logic
                      },
                      child: Container(
                        width: 60,
                        height: 60,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color:
                              AppColors.primaryColor, // Adjust the color as needed
                        ),
                        child: const Icon(
                          Icons.arrow_right,
                          size: 40,
                          color: AppColors.backgroundColor,
                        ),
                      ),
                    ),
                    const SizedBox(height: 35),
    
                    // Sign Up
                    TextButton(
                      onPressed: () {
                        // Handle sign up logic
                      },
                      child: const Text(
                        "Sign up, if you’re new!",
                        style: TextStyle(
                          fontFamily: "RobotoSlab-Light",
                          fontSize: 18,
                          color: AppColors.textColor,
                        ),
                      ),
                    ),
                    const SizedBox(height: 30),
                  ],
                )),
          ),
        );
      }
    }

>Solution :

simpliest aproach instead of hardcode 100 you could do this:

static const userNameTopMarginRatio = 0.2;
...
Container(height: MediaQuery.sizeOf(context).height * userNameTopMarginRatio);

You can choose a more accurate ratio to the screen height yourself.