Flutter SingleChildScrollView 안에 있는 위젯을 수직으로 가운데 정렬하세요., Center widget vertically inside a SingleChildScrollView

질문

Flutter에 새로 왔습니다. 간단한 폼을 만들며 스스로 훈련하고 있습니다. iPhone에서 디버깅을 하다가 가상 키보드가 오류를 일으켰음을 알게 되었습니다: "A RenderFlex overflowed by 29 pixels on the bottom". 이 문제를 해결하기 위해 Container를 SingleChildScrollView로 감싸주었습니다.

문제는 이제 Column의 내용이 더 이상 가운데 정렬되지 않는다는 것입니다. 왜 그런지 알 수가 없습니다...

아래는 이해를 돕기 위한 코드입니다:

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: '사용자 이름',
                            suffixIcon: Icon(Icons.account_circle)))),
                Container(
                  child: TextFormField(
                    controller: _passwordController,
                    obscureText: true,
                    decoration: InputDecoration(
                        hintText: '비밀번호', suffixIcon: Icon(Icons.vpn_key)),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.0),
                  child: RaisedButton(
                    splashColor: Colors.greenAccent,
                    color: Colors.blue,
                    child: Text('제출'),
                    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 로그인'),
        ),
        body: Stack(
          children: _buildBody(),
        ));
  }

Column에 "mainAxisAlignment: MainAxisAlignment.center" 속성을 추가했습니다. 이전에는 잘 작동했지만 SingleChildScrollView로 감싸면서 작동하지 않게 되었습니다.

누군가 저를 도와주시고 왜 더 이상 작동하지 않는지 설명해 주신다면 정말 감사하겠습니다 :)

답변

ArtiomLK 는 댓글에서 도움이 된 솔루션을 제안했습니다:

SingleChildScrollView을 Center에 감싸세요. 위젯 트리는 다음과 같습니다:

Center( child: SingleChildScrollView( child: Column(...)))

다른 사람들의 도움은 없었습니다.