Textfields shrinking whenever keyboard appears in flutter - flutter

Question

I am trying to create an simple login form, there are 3 components in a column: row and 2 text fields.
The row contains an image and text.
The problem is whenever the keyboard appears while I want to type something in the textfield, all UI is shrinking.
I have attached before and after keyboard appears
How to make it such that whenever keyboard appears the elements hidden below the keyboard?
Here is my code:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Flexible(
fit: FlexFit.tight,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Hero(
tag: "logo",
child: Image.asset(
"images/flash.png", width: 70, height: 50,)
),
),
),
Flexible(
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Text(
"Demo Chat",
style: TextStyle(
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.bold
),
),
),
)
],
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 50,
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: kTextFieldDecorationEmail,
keyboardType: TextInputType.emailAddress,
),
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 50,
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: kTextFieldDecorationPassword,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
),
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 70,
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: EdgeInsets.all(20),
child: MaterialButton(
color: Colors.blueAccent,
onPressed: (){},
height: 50,
child: Text(
"Login",
style: TextStyle(
color: Colors.black
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),
),
)
],
),

Answer 1

That is because you are using flexible with FlexFit.tight, this allows it to fit into screen regardless of the size. I would suggest you to use MediaQuery or some other field for this to tackle. An example to eliminate this would be something like this. I have edited your code a slight bit since I do not have the image and decoration at the moment which you are using I have put in some random one for the time being.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 50),
child: Text(
"Demo Chat",
style: TextStyle(
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.bold),
),
)
],
),
SizedBox(
height: 50,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Username',
filled: true,
fillColor: Colors.grey,
contentPadding:
const EdgeInsets.only(left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
keyboardType: TextInputType.emailAddress,
),
),
SizedBox(
height: 50,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Password',
filled: true,
fillColor: Colors.grey,
contentPadding:
const EdgeInsets.only(left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 70,
),
),
Padding(
padding: EdgeInsets.all(20),
child: MaterialButton(
color: Colors.blueAccent,
onPressed: () {},
height: 50,
child: Text(
"Login",
style: TextStyle(color: Colors.black),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
),
)
],
),
),
);
}
}
Screen: