How to use the shape in RaisedButton in Flutter?

If you want to get something fancier, it is highly recommended to use the Image for the background of RaisedButton shape, and then you can use an ExImage for the icon. 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 : "A RenderFlex overflowed by 29 pixels on the bottom". I fixed this issue by wrapping my Container inside a SingleChildScrollView.

The problem now is my Column's content is no longer center. I can't figure out why ...

Here's my code to help you to understand :

List<Widget> _buildBody() {

    var listWidget = List<Widget>();



    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: <Widget>[

                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(),

        ));

  }

I added the property "mainAxisAlignment: MainAxisAlignment.center" to my Column. It worked well before I wrapped it into the SingleChildScrollView.

If someone could help me and explain me why it doesn't work anymore I would really appreciated it :)