Padding not rendering between header and textfield?

Question

I want to add space between my header and text field, as currently, they are far too close. I have tried adding padding to the row which has the text field, however, there is no movement. Any thoughts on how I could do so?

Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Image.asset(
            "assets/Login_Photo.jpg",
            height: MediaQuery.of(context).size.height * 0.4,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: TextStyle(
                    fontSize: 35,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                Row(
              padding: const EdgeInsets.all(50.0),
                  children: <Widget>[
                  Expanded(
                      child: TextField(
                          decoration:
                              InputDecoration(hintText: "Email Address"))),

can produce a minimal, complete, and verifiable example? – John Joe Feb 17 '21 at 03:04 — John Joe, Feb 17 '21 at 03:04
@JohnJoe that is a sample.. works in my enviornment – KyleUSA Feb 17 '21 at 03:50 — KyleUSA, Feb 17 '21 at 03:50

score 3 · Accepted Answer · answered Feb 17 '21 at 04:19

I have edited your code, So you can wrap Row in the Container and set margin like as top, bottom ,left, right according to your UI, Please tell me if my code is useful or not.

  Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Image.asset(
            "assets/Login_Photo.jpg",
            height: MediaQuery.of(context).size.height * 0.4,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: TextStyle(
                    fontSize: 35,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.only(top: 10, left: 0, right: 0, bottom: 0),
                  child: Row(
                    // padding: const EdgeInsets.all(50.0),
                    children: <Widget>[
                      Expanded(
                        child: TextField(
                          decoration:
                              InputDecoration(hintText: "Email Address"),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

score 1 · Answer 2 · answered Feb 17 '21 at 03:53

Use SizedBox widget, with the height property, you assign the distance you want to separate. For Exmaple:

SizedBox(height: 10)//change this value for which you need.

Full code, look like this:

Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Image.asset(
            "assets/Login_Photo.jpg",
            height: MediaQuery.of(context).size.height * 0.4,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: TextStyle(
                    fontSize: 35,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                Sizedbox(height: 10),
                Row(
              padding: const EdgeInsets.all(50.0),
                  children: <Widget>[
                  Expanded(
                      child: TextField(
                          decoration:
                              InputDecoration(hintText: "Email Address"))),

Thanks, but this does not seem to work.. throws an error. I tried this as well earlier, the same way you have provided, but no luck. Any other thoughts? — KyleUSA, Feb 17 '21 at 03:55

score 1 · Answer 3 · answered Feb 17 '21 at 04:04

How strange that it doesn't work for you, maybe one of these alternatives works for you:

Container and give some height:

Column(
  children: <Widget>[
    Widget1(),
    Container(height: 10), // set height
    Widget2(),
  ],
)

Spacer

Column(
  children: <Widget>[
    Widget1(),
    Spacer(), // use Spacer
    Widget2(),
  ],
)

Expanded

Column(
  children: <Widget>[
    Widget1(),
    Expanded(child: SizedBox()), // use Expanded
    Widget2(),
  ],
)

mainAxisAlignment

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
  children: <Widget>[
    Widget1(),
    Widget2(),
  ],
)

Wrap

Wrap(
  direction: Axis.vertical, // make sure to set this
  spacing: 20, // set your spacing
  children: <Widget>[
    Widget1(),
    Widget2(),
  ],
)

Space between Column's children in Flutter

Padding not rendering between header and textfield?

3 Answers3