how to reduce container height flutter - flutter

Question

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

Answer 1

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->

Answer 2

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.