Flutter layout error 'A RenderFlex overflowed by Infinity pixels on the bottom'

Question

I have Scaffold and

MaterialApp(
    home: Scaffold(
      body: Stact(
    ....
    ....
    return Column(
                children: <Widget>[
                  Align(
                    alignment: Alignment.topCenter,
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(0.0, 60.0, 0.0, 0.0),
                      child: Image(
                        image: AssetImage('assets/images/logo.png'),
                      ),
                    ),
                  ),
                  authController.signIn() == true ? SignInView() : SignUpView(),
                  Align(
                    alignment: Alignment.center,
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          RaisedButton(
                            child: Text('Sign In',
                                style: TextStyle(
                                  color: Colors.white,
                                )),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(15.0),
                                  topLeft: Radius.circular(15.0),
                                ),
                                side: BorderSide(color: Colors.orange)),
                            color: Colors.transparent,
                            onPressed: () {
                              print('login');
                              authController.toSignIn(true);
                            },
                          ),
                          RaisedButton(
                            child: Text('Sign Up',
                                style: TextStyle(
                                  color: Colors.white,
                                )),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                  bottomRight: Radius.circular(15.0),
                                  topRight: Radius.circular(15.0),
                                ),
                                side: BorderSide(color: Colors.orange)),
                            color: Colors.transparent,
                            onPressed: () {
                              print('signup');
                              authController.toSignIn(false);
                            },
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              );

SignInView() with

return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        height: 100.0,
        child: Column(
          children: <Widget>[
            Text('hey'),
          ],
        ),
      ),
    );

As soon as, I add SignInView and SignOutView in the Column Children, I receive this A RenderFlex overflowed by Infinity pixels on the bottom.

I have tried to change Scaffold to something else, Container or even with Padding widget. How can I set Scaffold height to its parent's height 100% like the CSS height 100vh or something in Flutter?

Answer 1

You should not use Scaffold inside another Scaffold. Remove the scaffold from SignInView() and keep it as Container

return Container(
            height: 100.0,
            child: Column(
              children: <Widget>[
                Text('hey'),
              ],
            ),
          ),

Pls let me know if this helps. Cheers