Home > Enterprise >  The following assertion was thrown during layout: A RenderFlex overflowed by X pixels on the bottom
The following assertion was thrown during layout: A RenderFlex overflowed by X pixels on the bottom

Time:03-11

Hi I'm new to flutter and im trying to build a simple sign in/sign up screen but every time the keyboard pops up it keeps getting this render error on the relevant widget Column, already changed de resizeToAvoidBottomInset to false but I would like the frame to scroll, for this I've tried wrapping every widget with either ListView or SingleChildScrollView but nothing seems to fix it or straight up give me some other error, what am I not seeing?

Thanks for the help!

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.symmetric(
            horizontal: 32,
          ),
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Flexible(child: Container(), flex: 2),
              //----------------------------------------------------------------
              //---------------------------logo image---------------------------
              //----------------------------------------------------------------
              SvgPicture.asset(
                'assets/logo.svg',
                color: Colors.red[800],
                height: 100,
              ),
              //spacing box
              const SizedBox(height: 55),
              //----------------------------------------------------------------
              //------------------------text for email--------------------------
              //----------------------------------------------------------------
              textFieldIn(
                textEditingController: _emailController,
                hintText: 'Enter your Email',
                textInputType: TextInputType.emailAddress,
              ),
              //spacing box
              const SizedBox(height: 21),
              //----------------------------------------------------------------
              //-----------------------text for password------------------------
              //----------------------------------------------------------------
              textFieldIn(
                textEditingController: _passwordController,
                hintText: 'Enter your Password',
                textInputType: TextInputType.text,
                isPass: true,
              ),
              //spacing box
              const SizedBox(height: 13),
              //----------------------------------------------------------------
              //-----------------------------button-----------------------------
              //----------------------------------------------------------------
              InkWell(
                onTap: () async {
                  setState(() {
                    _isLoading = true;
                  });
                  String result = await authentication().logInUser(
                    email: _emailController.text,
                    password: _passwordController.text,
                  );
                  print(result);
                  if (result != 'Success') {
                    showSnackBar(result, context);
                  } else if (result == 'Success') {
                    Navigator.of(context).pushReplacement(
                      MaterialPageRoute(
                        builder: (context) => const responsiveScreen(
                          mobileLayout: mobileScreen(),
                          webLayout: webScreen(),
                        ),
                      ),
                    );
                  }
                },
                child: Container(
                  child: const Text('Log In'),
                  width: double.infinity,
                  alignment: Alignment.center,
                  padding: const EdgeInsets.symmetric(vertical: 13),
                  decoration: const ShapeDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(4),
                      ),
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              //spacing box
              const SizedBox(height: 8),
              Flexible(
                child: Container(),
                flex: 2,
              ),
              //----------------------------------------------------------------
              //---------------------------signing up---------------------------
              //----------------------------------------------------------------
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    child: const Text("Don't have an account? "),
                    padding: const EdgeInsets.symmetric(
                      vertical: 8,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => const signUpScreen(),
                        ),
                      );
                    },
                    child: Container(
                      child: const Text(
                        "Sign Up",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      padding: const EdgeInsets.symmetric(
                        vertical: 8,
                      ),
                    ),
                  ),
                ],
              ),
              //spacing box
              const SizedBox(height: 34),
            ],
          ),
        ),
      ),
    );
  }

CodePudding user response:

First, for advice wrap Scaffold inside SafeArea not the other way. Now about your question, wrapping the first Container in the three or your Column like this

SizedBox(
   height: MediaQuery.of(context).size.height,
   child: SingleChildScrollView (
      child: ...
   )
);

should resolve the problem.

  • Related