How to add vertical spacing to widgets Flutter

Question

I have a piece of code here which makes up the body of the login and register screens. Everything is in the position i want but i would like to space them out a little. The two input fields, title, subtitle, button and textbutton are too close together vertically. I tried to use mainaxisalignment.spacebetween but i get a constraint error and everything i have on the screen disappears afterwards except the background.

The body used by the register and login screen:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomLeft,
            colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
          ),
          image: DecorationImage(
            image: AssetImage("lib/assets/images/register.png"),
            alignment: Alignment.topCenter,
          ),
        ),
        child: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/assets/images/bottomleft.png'),
                  alignment: Alignment.bottomLeft,
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/assets/images/toptop.png'),
                  alignment: Alignment.topRight,
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('lib/assets/images/topbig.png'),
                    alignment: Alignment.topCenter,
                    repeat: ImageRepeat.repeat),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('lib/assets/images/top.png'),
                    alignment: Alignment.topCenter,
                    repeat: ImageRepeat.repeatX),
              ),
            ),
            Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
              child: ListView(
                children: [
                  if (onBackPressed == null) verticalSpaceLarge,
                  if (onBackPressed != null) verticalSpaceRegular,
                  if (onBackPressed != null)
                    IconButton(
                      padding: EdgeInsets.zero,
                      onPressed: onBackPressed,
                      alignment: Alignment.centerLeft,
                      icon: Icon(
                        Icons.arrow_back_ios,
                        color: Colors.black,
                      ),
                    ),
                  Center(
                    child: Text(
                      title!,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30.0,
                        fontWeight: FontWeight.bold,
                        fontFamily: 'Montserrat',
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      child: Center(
                        child: Text(
                          subtitle!,
                          style: ktsMediumGreyBodyText,
                        ),
                      ),
                    ),
                  ),
                  form!,
                  if (onForgotPassword != null)
                    Align(
                      alignment: Alignment.centerRight,
                      child: GestureDetector(
                        onTap: onForgotPassword,
                        child: Center(
                          child: Text(
                            'Forgot Password?',
                            style: ktsMediumGreyBodyText.copyWith(),
                          ),
                        ),
                      ),
                    ),
                  if (validationMessage != null)
                    Center(
                      child: Text(
                        validationMessage!,
                        style: TextStyle(
                            color: Colors.red, fontSize: kBodyTextSize),
                      ),
                    ),
                  if (validationMessage != null) verticalSpaceRegular,
                  GestureDetector(
                    onTap: onMainButtonTapped,
                    child: Container(
                      width: double.infinity,
                      height: 50,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: kcPrimaryColor,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: busy!
                          ? CircularProgressIndicator(
                              valueColor: AlwaysStoppedAnimation(Colors.white),
                            )
                          : Text(
                              mainButtonTitle!,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 14),
                            ),
                    ),
                  ),
                  if (onCreateAccountTapped != null)
                    GestureDetector(
                      onTap: onCreateAccountTapped,
                      child: Center(
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "Don\'t have an account?",
                                  style: TextStyle(color: Colors.white),
                                ),
                                Text(
                                  "SIGN UP",
                                  style: TextStyle(color: kcPrimaryColor),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "OR SIGN IN WITH",
                                  style: TextStyle(color: kcMediumGreyColor),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  if (showTermsText!)
                    Center(
                      child: Text(
                        "By signing up you agree to our terms, conditions and privacy policy",
                        style: ktsMediumGreyBodyText,
                        textAlign: TextAlign.center,
                      ),
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

the login screen:

Widget build(BuildContext context) {
    return ViewModelBuilder<LoginScreenModel>.reactive(
      builder: (context, model, child) => Scaffold(
        body: AuthenticationLayout(
          busy: model.isBusy,
          onCreateAccountTapped: () {},
          //validationMessage: model.validationMessage,
          title: 'SIGN IN',
          subtitle: 'please fill the form below',
          mainButtonTitle: 'SIGN IN',
          form: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  hintText: 'Username',
                  hintStyle: TextStyle(color: Colors.white),
                  prefixIcon: const Icon(
                    Icons.person,
                    color: Colors.white,
                  ),
                ),
              ),
              TextField(
                decoration: InputDecoration(
                  hintText: 'Password',
                  hintStyle: TextStyle(color: Colors.white),
                  prefixIcon: const Icon(
                    Icons.lock,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
          onForgotPassword: () {},
        ),
      ),
      viewModelBuilder: () => LoginScreenModel(),
    );
  }
}

Solution 1

You should Add SizedBox() in between two Widgets, or Set Padding to your widgets or you use Container also like below:

Using SizedBox()

Column(
  children:[
    Widget 1(),
    SizedBox(height:10),
    Widget 2(),
    SizedBox(height:10),
    Widget 3(),
  ],
),

Using Padding()

Column(
children:[
   Padding(
      padding:EdgeInsets.all(8.0)
      child: Widget 1(),
   ),
   Padding(
      padding:EdgeInsets.all(8.0)
      child: Widget 2(),
   ),
   Padding(
      padding:EdgeInsets.all(8.0)
      child: Widget 3(),
   ),
 ],
),

Using Container()

Column(
children:[
   Container(
      padding:EdgeInsets.all(8.0)
      child: Widget 1(),
   ),
   Container(
      padding:EdgeInsets.all(8.0)
      child: Widget 2(),
   ),
   Container(
      padding:EdgeInsets.all(8.0)
      child: Widget 3(),
   ),
 ],
),

You should use padding on your choice like:

    EdgeInsets.all(8.0),
    EdgeInsets.only(left:8.0,top:8.0,right:8.0,bottom:8.0),
    EdgeInsets.symmetric(vertical: 8.0,horizontal:8.0),

Solution 2

     Column(
      children: <Widget>[
      FirstWidget(),
      SizedBox(height: 100),
       SecondWidget(),
      ],
     ),