Flutter 应用程序 - “A RenderFlex 溢出...”和小部件底部

Question

我在我的 flutter 应用程序中创建了登录页面。 这是我的原型：

“忘记密码” - 应该在页面底部。 但是当我输入密码时，我得到一个错误：A RenderFlex overflowed by..

这是我的代码：

 Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      FlutterLogo(
        size: 120,
      ),
      Padding(
        padding: EdgeInsets.only(top: 40),
      ),
      Center(
          child: Form(
              child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: TextFormField(
              decoration: InputDecoration(
                  labelText: 'Login', border: OutlineInputBorder()),
              keyboardType: TextInputType.phone,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: TextFormField(
              decoration: InputDecoration(
                  labelText: 'Pass', border: OutlineInputBorder()),
              keyboardType: TextInputType.phone,
            ),
          ),
          SizedBox(
            height: 50.0,
            width: double.infinity,
          ),
          Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                    height: 48.0,
                    child: RaisedButton(
                        child: Text('Register'),
                        shape: new RoundedRectangleBorder(
                            borderRadius:
                                new BorderRadius.circular(10.0)))),
                Container(
                    height: 48.0,
                    child: RaisedButton(
                        child: Text('Loggin'),
                        shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(10.0))))
              ])
        ],
      ))),
      Expanded(
          child: new Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                  padding: EdgeInsets.only(bottom: 20.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Forggoten pass?"),
                      GestureDetector(
                          child: Text(
                            "Restore",
                          ),
                          onTap: () {})
                    ],
                  ))))
    ],
  ),

如何解决这个问题？

Answer 1

我让你的Container全高并添加SingleChildScrollView

class GeneratedMailCouponScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(),
    backgroundColor: Colors.white,
    body: SafeArea(
        child: SingleChildScrollView(
        child: Container(
            height: MediaQuery.of(context).size.height,
            child: Column(
            children: <Widget>[
                FlutterLogo(
                size: 120,
                ),
                Padding(
                padding: EdgeInsets.only(top: 40),
                ),
                Center(
                child: Form(
                    child: Column(
                    children: <Widget>[
                        Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: TextFormField(
                            decoration: InputDecoration(
                                labelText: 'Login',
                                border: OutlineInputBorder()),
                            keyboardType: TextInputType.text,
                        ),
                        ),
                        Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: TextFormField(
                            decoration: InputDecoration(
                                labelText: 'Pass',
                                border: OutlineInputBorder()),
                            keyboardType: TextInputType.text,
                        ),
                        ),
                        SizedBox(
                        height: 50.0,
                        width: double.infinity,
                        ),
                        Container(
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                            Container(
                                height: 48.0,
                                child: RaisedButton(
                                child: Text('Register'),
                                shape: new RoundedRectangleBorder(
                                    borderRadius:
                                        new BorderRadius.circular(10.0),
                                ),
                                ),
                            ),
                            Container(
                                height: 48.0,
                                child: RaisedButton(
                                child: Text('Loggin'),
                                shape: new RoundedRectangleBorder(
                                    borderRadius:
                                        new BorderRadius.circular(10.0),
                                ),
                                ),
                            ),
                            ],
                        ),
                        )
                    ],
                    ),
                ),
                ),
                Expanded(
                child: Container(
                    padding: EdgeInsets.only(bottom: 20.0),
                    child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text("Forggoten pass?"),
                        GestureDetector(
                            child: Text(
                            "Restore",
                            ),
                            onTap: () {})
                    ],
                    ),
                ),
                )
            ],
            ),
        ),
        ),
    ),
    );
}
}

Answer 2

在您的Scaffold内部使用

resizeToAvoidBottomInset: false

并将您的Column包装在SingleChildScrollView