FetFrumos
FetFrumos

Reputation: 5954

Flutter app - "A RenderFlex overflowed by..." and widget bottom

I created login page in my flutter app. This is my propotype:

enter image description here

"forgot password" - should be at the bottom of the page. but when I enter the password I get an error:A RenderFlex overflowed by..

enter image description here

This is my code:

 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: () {})
                    ],
                  ))))
    ],
  ),

How fix this issue?

Upvotes: 1

Views: 353

Answers (2)

Amit Prajapati
Amit Prajapati

Reputation: 14315

I made your Container full height and add 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: () {})
                    ],
                    ),
                ),
                )
            ],
            ),
        ),
        ),
    ),
    );
}
}

enter image description here

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 267664

Inside your Scaffold use

resizeToAvoidBottomInset: false

And also wrap your Column in SingleChildScrollView

Upvotes: 1

Related Questions