title: Center widget vertically inside a SingleChildScrollView
body: <p>I'm new to Flutter so I train myself by making a simple form. I realized while I was debugging on my iPhone the virtual keyboard triggered an error: <code>&quot;A RenderFlex overflowed by 29 pixels on the bottom&quot;</code>. I fixed this issue by wrapping my Container inside a <code>SingleChildScrollView</code>.</p>
  <p>The problem now is my Column's content is no longer centered. I can't figure out why ...</p>
  <p>Here's my code to help you to understand :</p>
  <pre><code>List&lt;Widget&gt; _buildBody() {
      var listWidget = List&lt;Widget&gt;();
  
      SingleChildScrollView singleChild = SingleChildScrollView(
          padding: EdgeInsets.only(top: 1.0),
          child: Container(
            alignment: Alignment.center,
            margin: EdgeInsets.all(30.0),
            padding: EdgeInsets.all(10.0),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  Container(
                    margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
                    child: Image.asset(
                      'assets/github.png',
                      width: 100.0,
                      height: 100.0,
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.only(bottom: 10.0),
                      child: TextFormField(
                          controller: _usernameController,
                          autofocus: true,
                          decoration: InputDecoration(
                              hintText: 'Username',
                              suffixIcon: Icon(Icons.account_circle)))),
                  Container(
                    child: TextFormField(
                      controller: _passwordController,
                      obscureText: true,
                      decoration: InputDecoration(
                          hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10.0),
                    child: RaisedButton(
                      splashColor: Colors.greenAccent,
                      color: Colors.blue,
                      child: Text('Submit'),
                      onPressed: () {
                        _handleSubmit();
                      },
                    ),
                  )
                ],
              ),
            ),
          ));
  
      listWidget.add(singleChild);
  
      if (_requesting) {
        var modal = new Stack(
          children: [
            new Opacity(
              opacity: 0.3,
              child: const ModalBarrier(dismissible: false, color: Colors.grey),
            ),
            new Center(
              child: new CircularProgressIndicator(),
            ),
          ],
        );
        listWidget.add(modal);
      }
  
      return listWidget;
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text('Github Login'),
          ),
          body: Stack(
            children: _buildBody(),
          ));
    }
  </code></pre>
  <p>I added the property &quot;mainAxisAlignment: MainAxisAlignment.center&quot; to my Column. It worked well before I wrapped it into the SingleChildScrollView.</p>
  <p>If someone could help me and explain me why it doesn't work anymore I would really appreciated it :)</p>