how to reduce the height of the green container. when I change flex values it throws bottom overflow under the green container, when I click the email field. appreciate your help on this. I want more space to form sections and decrease the height of green space. ..........................................................

        return GestureDetector(
          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
          child: Scaffold(
            body: Column(
              children: [
                Expanded(
                  flex: 2,
                  child: Container(
                    color: MainGreen,
                    child: Column(children: [
                       Align(
                         alignment: Alignment.topLeft,
                         child: Padding(
                           padding: const EdgeInsets.only(top: 8),
                           child: Container(
                             child: IconButton(
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                                icon: Icon(
                                  Icons.arrow_left_sharp,
                                  color: backgroundWhite,
                                  size: width * 0.1,
                                ),
                              ),
                           ),
                         ),
                       ),
                      Center(
                        child: ClipRect(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(
                                Icons.crib_rounded,
                                color: textWhite,
                                size: width * 0.18,
                              ),
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.001,
                      ),
                      Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Fantom Carpentry",
                              style: TextStyle(
                                  fontSize: width * 0.06,
                                  color: textWhite,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: "Roboto"),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: height * 0.08,
                      ),
                      Center(
                        child: Text(
                          "Login",
                          style: TextStyle(
                              fontSize: 25,
                              color: textWhite,
                              fontWeight: FontWeight.bold,
                              fontFamily: "Roboto"),
                        ),
                      )
                    ]),
                  ),
                ),
                const Expanded(
                    flex: 2,
                    child: Center(
                        child: Padding(
                      padding: EdgeInsets.only(left: 25, right: 25),
                      child: LoginForm(),
                    ))),
              ],
            ),
          ),
        );
      }
    }

CodePudding user response：

Try below code and remove 1st Expanded widget

Scaffold(
    body: Column(
      children: [
         Container(
            color: Colors.green,
            child: Column(
              children: [
                Align(
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      child: IconButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        icon: Icon(
                          Icons.arrow_left_sharp,
                          color: Colors.white,
                          size: width * 0.1,
                        ),
                      ),
                    ),
                  ),
                ),
                Center(
                  child: ClipRect(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.crib_rounded,
                          color: Colors.white,
                          size: width * 0.18,
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: height * 0.001,
                ),
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "Fantom Carpentry",
                        style: TextStyle(
                            fontSize: width * 0.06,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontFamily: "Roboto"),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: height * 0.05,
                ),
                Center(
                  child: Text(
                    "Login",
                    style: TextStyle(
                      fontSize: 25,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontFamily: "Roboto",
                    ),
                  ),
                ), SizedBox(
                  height: height * 0.02,
                ),
              ],
            ),
          ),
       
        Expanded(
          flex: 2,
          child: Center(
            child: Padding(
              padding: EdgeInsets.only(left: 25, right: 25),
              child: Container(),
            ),
          ),
        ),
      ],
    ),
  ),

Result->

CodePudding user response：

You are getting overflow because the screen resizes when keyboard option. If you change the size of container when keyboard opens, your UI may not look as desired, so I would suggest to wrap your entire widget in a list view.

CodePudding user response：

Wrap the Scaffold With SafeArea, Hope That Would Help You.