Develop Reference

How to create row with multiple lines in flutter

I'm trying to replicate a flutter design that looks like this, I was able to achieve something similar by using Listtile widget, my only issue was that the leading icon didn't align vertically with the title. Please is there any other way to achieve this? I tried using a row widget but the multiple line text won't fit into the screen.

You can try this code
Container(
color: Colors.white,
padding: const EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: Icon(
Icons.message,
color: Colors.white,
),
),
SizedBox(width: 10,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Message", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16
),),
Text("How to create row with multiple lines in flutter How to create row with multiple lines in flutter")
],
),
),
],
),
),
Result:-
Please let me know if it work.

You can try as well as my code.
Widget ListItem({
String imageUrl,
String text,
String caption,
double imageSize = 50,
double horizontalSpacing = 15,
double verticalspacing = 20,
bool showDetailIndicatorIcon = true,
GestureTapCallback onTap,
}) {
return InkWell(
onTap: onTap,
child: Container(
margin: EdgeInsets.only(top: 2),
padding: EdgeInsets.symmetric(
horizontal: horizontalSpacing, vertical: verticalspacing),
child: Row(
children: [
ClipRRect(
child: Image.network(
imageUrl,
fit: BoxFit.cover,
height: imageSize,
width: imageSize,
),
borderRadius: BorderRadius.circular(imageSize / 2),
),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
text,
style: TextStyle(
color: ColorRes.lightWhite,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 5),
Text(
caption,
style: TextStyle(
color: ColorRes.grey,
fontSize: 12,
fontWeight: FontWeight.normal,
),
maxLines: 3,
),
],
),
),
),
],
),
),
);
}
I hope it's work. Please let me know.

Flutter: Uniform container size regardless of the platform (android, iOS)

Example for the structure of the page:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_block1(),
_block2(),
],
),
),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: _block3(),
)
),
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: _block4(),
)
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: _block5(),
)
),
],
),
),
);
}
Example of one of the small container widgets to be loaded
Widget _block1() {
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(0.0),
),
margin: EdgeInsets.all(4.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'headline',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 12,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
],
),
),
);
}
Example of one of the large container:
Widget _block3() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(0.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'another container for displaying different contents',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),),
])
);
}
Android tablet Nexus 10
but on iOS iPad I get overflowed errors
iOS iPad 8th generation
Is there a way to adjust the height and width of the containers so that they look the same on Android and iOS and do not cause overflowed errors without the aid of "SingleChildScrollView"?

Wrap each text in the _bloc1 widget with Expanded and remove the SizeBox widgets. Example, for the individual fixed SizedBox heights in your _block1 widget, they will eventually add up and cause overflow error when the total size becomes larger than available space. Also note that if your widgets are too many, things will still overflow.
Another possible solution is using FittedBox to resize your texts or contents based on available width and height.

text widget keeps centering without centre widget

image link since i'm not allowed to post images yet
I'm trying to create an app but the two texts 'hello and mr '' are in the center even when I've not added the center widget and why do they have that amount of space between them. the app title had a massive bottom padding that i had to remove it.' the app sample is in the image above.
I just want the two to stack above each other in the top left corner, and the space between them to reduce, Here's my code:
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Text(
'Hello,',
style: Theme.of(context)
.textTheme.headline4
.apply( color: Colors.grey),
),
Text(
"Mr. Udeinya",
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.deepOrange, fontWeightDelta: 2),
),
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.deepOrange,
border: Border.all(
width: 3,
color: Colors.white,
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Wallet Balance :',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 10.0,
),
Container(
width: double.infinity,
)
],
),
),
],
),
),
),
and the image
image link since i'm not allowed to post images yet

One solution to your problem would be to change the crossAxisAlignment property of your column to CrossAxisAlignment.start
I would also recommend, if you intend to group them together, to put your two text widgets together in a column themselves.
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hello,',
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.grey),
),
Text(
"Mr. Udeinya",
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.deepOrange, fontWeightDelta: 2),
),
],
),
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.deepOrange,
border: Border.all(
width: 3,
color: Colors.white,
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Wallet Balance :',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 10.0,
),
Container(
width: double.infinity,
)
],
),
),
],
),
),
)
Something like This ? Hope that it helped.

Try to use text align property of Text widget you can find more in the link. Text widget documentation
Example:
Text("data,",textAlign: TextAlign.left,)

The problem is you are not giving a crossAxisAlignment to the top-most column, so by default, it is centred.Add this to the top-most Column
crossAxisAlignment: CrossAxisAlignment.start,

Does my app meet standards for resizing for different screen sizes and ratios/PPI? Playstore ready?

So, I've been working on a Flutter app for a while now and I think I want to publish my first app. All the mechanics work well but I am worried it won't resize properly or meet the Playstore's standards.
I've read all the Playstore docs and they say that your app should resize to every device... does the review process when you submit your app enable the team to check if it fits for different devices and check which ones it doesn't work on?
I am also worried about padding... what happens if the user installs my app on a phone 20 pixels wide and my padding horizontally is 25... it would totally break! Is this just unrealistic worrying?
I've really simplified my code for my UI of my app below and wondering if there is anything that is obviously messing with the resizing or would make it not work. I've tested it on all my families physical devices and it seems to work so far... but I really am unsure. Any help/insight is greatly appreciated!
(Sorry if my question is stupid)
Main Screen:
import 'package:flutter/material.dart';
class SOTest extends StatefulWidget {
#override
_SOTestState createState() => _SOTestState();
}
class _SOTestState extends State<SOTest> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.lightBlueAccent,
body: Container(
color: Colors.lightBlueAccent,
child: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 10),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 10, top: 10),
child: Container(
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
InkWell(
child: Container(
padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width / 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
],
),
child: Center(
child: FittedBox(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Level',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.grey,
fontSize: 35),
),
Text(
'15',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 50),
),
],
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: InkWell(
child: Container(
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
]),
child: Center(child: Icon(Icons.chevron_right, size: MediaQuery.of(context).size.width / 9, color: Colors.indigoAccent,),),
),
),
),
],
),
Expanded(
child: Container(
child: Center(
child: FittedBox(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 45),
child: Text(
'Pattern',
textScaleFactor: 1,
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: MediaQuery.of(context).size.width / 10,
color: Colors.white),
),
),
Padding(
padding: EdgeInsets.only(left: 45),
child: Text(
'Cracker',
textScaleFactor: 1,
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: MediaQuery.of(context).size.width / 10,
color: Colors.white),
),
),
],
),
),
),
),
),
Container(
padding: EdgeInsets.only(top: 5, bottom: 5, left: 5, right: 5),
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width / 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
],
),
child: Center(
child: FittedBox(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Attempts',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.grey,
fontSize: 35),
),
Text(
'1',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 50),
),
],
),
),
),
),
],
),
),
),
Stack(
children: <Widget>[
Center(
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
],
),
),
),
],
),
],
),
),
),
],
),
),
);
}
}
NumSquare refers to:
InkWell(
child: Container(
width: MediaQuery.of(context).size.width / 6,
height: MediaQuery.of(context).size.width / 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
]),
child: Center(
child: Text(
'16',
textScaleFactor: 1,
style: TextStyle(
color: Colors.white,
fontFamily: 'Ub',
fontSize: MediaQuery.of(context).size.width / 12),
),
),
),
);

As far as I know, and based on personal experience the review process for the play store simply checks if your apk is malware free. The design itself will not factor into whether the app is accepted for publishing or not.

Bottom overloaded by 213 pixels in flutter

Hi I am trying to create login screen. It is working fine for me. When I open the keyboard then it is giving me an error Bottom overloaded by 213 pixels.
Widget LoginPage() {
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal#live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Forgot Password?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => {},
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => {},
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
Text(
"OR CONNECT WITH",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.only(right: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xff3B5998),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea90,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"FACEBOOK",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.only(left: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xffdb3236),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea88,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"GOOGLE",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
],
),
)
],
),
));
}
Does anyone know what could be the issue ?

I would suggest replacing the top Column widget with a ListView, that automatically resizes on keyboard input, whilst also supporting scrolling.
If you really want this setup as it is, you can edit your Scaffold with the parameter
resizeToAvoidBottomPadding: false
That should make the error disappear

Scaffold(
resizeToAvoidBottomInset: false, // set it to false
...
)
As Andrey said, you may have issues with scrolling, so you may try
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
body: SingleChildScrollView(child: YourBody()),
)

With resizeToAvoidBottomPadding: false in Scaffold, You don't see all the widgets that are below the open textfield. The solution is to insert a container with a SingleChildScrollView inside. Example:
Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
color: viewModel.color,
child: SingleChildScrollView(child:"Your widgets"));

you usually need to provide a scroll widget on top of your widgets because if you try to open the keyboard or change the orientation of your phone, flutter needs to know how to handle the distribution of the widgets on the screen.
Please review this resource, you can check the different options that flutter provide Out of the box, and choose the best option for your scenario.
https://flutter.io/widgets/scrolling/

wrap your child view into ListView will solve the prob. Please check this
class _LoginScreenState extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new Text("jk", style: TextStyle(fontFamily: "mono_bold")),
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(),
decoration: InputDecoration(
labelText: "Email",
contentPadding: EdgeInsets.all(8.0)
),
keyboardType: TextInputType.emailAddress,
)
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(
),
decoration: InputDecoration(
labelText: "Password"
),
keyboardType: TextInputType.text,
obscureText: true,
),
),
],
),
),
],
)
),
);
}

wrap your column into SingleChildScrollView will solve the problem. Please check this:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(),
TextField(),
],
),
))));
}
And You also use for removing yellow black overflow line
resizeToAvoidBottomPadding: false
but in this case, TextField does not move up on click time.

wrap with SingleChildScrollView Widget here's my code to solve this situation:
it is best and easiest method
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Hero(
tag: 'logo',
child: Container(
height: 200.0,
child: Image.asset('images/logo.png'),
),
),
SizedBox(
height: 48.0,
),
TextField(
onChanged: (value) {
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter username'),
),
SizedBox(
height: 8.0,
),
TextField(
onChanged: (value) {
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter password'),
),
SizedBox(
height: 24.0,
),
RoundedButton(
colour: Colors.blueAccent,
text: 'Register',
onPressed: () {
//later todo
},
),
],
),
),

You can set resizeToAvoidBottomInset: false for avoiding overflow, but you can't reach fields in bottom of page, which can be covered by keyboard.
Or you can wrap body of Scaffold inside SingleChildScrollView

You can enclose all the widgets within the ListView.
So you can scroll it and the overloaded will disappear.

you should add resizeToAvoidBottomInset: false, and put your button in child:SingleChildScrollView() like the following code below :
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: PreferredSize(
preferredSize:const Size(double.infinity,100),
child:(ResponsiveLayout.isTinyLimit(context) ||
ResponsiveLayout.isTinyHeightLimit(context))
? Container()
: const AppBarWidget(),
),
body: Center(
child:SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center ,
children: [
Text("Temperature"),
LineChartSample2(),
Text("Gas Level"),
LineChartSample2(),
on?Icon(Icons.lightbulb,
size:100,
color: Colors.lightBlue.shade700 ,
):const Icon(Icons.lightbulb_outline,
size:100,
),
ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: on? Colors.green: Colors.white10),
onPressed: (){
dbR.child("movement").set({"Switch":!on});
setState(() {
on = !on;
});
},
child:on ? const Text("On"):const Text("Off"))
],
),
),
) ),
),
);

Put your content in to SingleChildScrollView and add a ConstrainedBox and try
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Wrap your top column inside SingleChildScrollView.
Make you layout scrollable.

You can wrap your Fields in single child ScrollView of Flutter.

This align items bottom to top,
Try this..
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
reverse: true,

Remove unwanted padding top and bottom
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
top: size.width * 0.15,
bottom: size.width * 0.15,
),
to change by this
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
),
This worked for me.

please set resizeToAvoidBottomPadding: false and set scrollPadding in textField

Instead of column widget try to use flex widget, which might solve your problem.

Try wrapping your main Column with
1.(ListView and give property shrinkWrap: true,) List view has property children: [], or
2.( SingleChildScrollView() )but it has only child: , .
Something like:
child: ListView(shrinkWrap: true, children: <Widget>[
new Column(children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal#live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
])
]),