handling application layout in flutter app - flutter

Question

I have Entry page to my app like below, I am getting bottom overflow , image size issue , text font issue, when I run on the phone with less than 5 inches,
If I run the same app on over 5 inches I am getting like below
Can anyone who have worked on developing flutter apps help me on how I can adjust according to the screen?
also How to adjust text size, image size every other things as per the screen size?
below is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Color colorTheme;
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => new _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
TextEditingController controllerEmail = TextEditingController();
TextEditingController controllerPassword = TextEditingController();
String username, password;
Widget loginButtonChild = const Text(
"Log in",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, fontFamily: "OpenSans-Regular", fontSize: 16),
);
Widget loginButtonWithCircle = Row(
children: <Widget>[
const Text(
"Log in",
style: TextStyle(
color: Colors.white,
fontFamily: "OpenSans-Regular",
),
),
CircularProgressIndicator(),
],
);
#override
Widget build(context) {
double maxHeight = MediaQuery.of(context).size.height;
// ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
return Scaffold(
resizeToAvoidBottomPadding: true,
body: SingleChildScrollView(
child: LimitedBox(
maxHeight: maxHeight * 1,
child: Stack(
//fit: StackFit.expand,
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.05,
left: MediaQuery.of(context).size.width * 0.05),
child: Image.asset('assets/Heat Map.png',
width: 100, height: 20, fit: BoxFit.fill),
)
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(15))),
padding: EdgeInsets.all(
// MediaQuery.of(context).size.width * 0.09,
MediaQuery.of(context).size.width * 0.1,
),
child: Image.asset(
'assets/layer_1_3.png',
// color: Color(0xFFe31735),
// width: 300,
width: MediaQuery.of(context).size.width * 0.72,
// height: 300,
height: MediaQuery.of(context).size.height * 0.5,
fit: BoxFit.contain,
),
),
Positioned(
left: 78.0,
bottom: 10.0,
child: RichText(
text: TextSpan(
text: 'APP',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '\nDevelopment',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
TextSpan(
text: '\nFlutter',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
],
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
],
),
SingleChildScrollView(
child: new Container(
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 40.0, 40.0),
child: new Form(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: Icon(Icons.person_outline,
size: 38, color: Colors.black),
),
SizedBox(width: 10.0),
new Expanded(
child: new TextFormField(
style: TextStyle(color: Colors.black),
controller: controllerEmail,
//cursorColor: , make it yellow later TODO
decoration: new InputDecoration(
labelText: "Username",
enabledBorder: new UnderlineInputBorder(
borderSide: new BorderSide(
color: Colors.red,
))),
keyboardType: TextInputType.text,
),
),
],
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: Icon(
Icons.lock_outline,
size: 38,
color: Colors.black,
),
),
SizedBox(width: 10.0),
new Expanded(
child: new TextFormField(
controller: controllerPassword,
style: TextStyle(color: Colors.red),
decoration: new InputDecoration(
labelText: "Password",
enabledBorder: new UnderlineInputBorder(
borderSide: new BorderSide(
color: Colors.red,
))),
obscureText: true,
keyboardType: TextInputType.text,
),
),
],
),
Padding(
padding: EdgeInsets.only(
top: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () {
},
child: Text(
"Forgot password?",
style: TextStyle(
color: Colors.grey,
fontFamily: "OpenSans-Regular",
),
),
)
],
),
),
SizedBox(
height: MediaQuery.of(context).size.width * 0.04,
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(25.0),
side: BorderSide(color: Colors.red)),
color: Colors.red,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 48),
child: loginButtonChild,
),
const SizedBox(
width: 45.0,
height: 45.0,
),
Icon(Icons.arrow_forward,
color: Colors.white),
],
),
onPressed: () {
}),
],
),
),
),
),
],
),
],
),
),
),
);
}
}

Answer 1

You can use SingleChildScrollView to avoid overflow error just wrap your widget with SingleChildScrollView
Example:-
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child:YourWidget();
)
)