Flutter - Responsive ui for different screen sizes - flutter

Question

I am trying to figure out the responsive aspect of flutter. So as you can see from the image things are not going all that well for the different screen sizes of iPhone.
I am working with a Stack and FractionallySizedBox but not sure if what I am doing is correct. Any help is appreciate.
Code is available here -> https://gist.github.com/GY22/1eefb5e48fdca9d785365cbccbdcb478
import 'package:flutter/material.dart';
class SignIn extends StatelessWidget {
//textfields + logo
List<Widget> _buildChildrenForm() {
return [
//logo
Text(
'THE GUEST LIST',
style: TextStyle(
color: Colors.white,
fontFamily: 'futura',
fontSize: 60.0
)
),
//email
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white
)
),
labelText: 'EMAIL',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
//hintText: 'DEMO#MAIL.COM',
hintStyle: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
style: TextStyle(
color: Colors.white,
fontSize: 20.0
),
),
SizedBox(height: 20.0,),
//password
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
obscureText: true,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white
)
),
labelText: 'PASSWORD',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
hintStyle: TextStyle(
color: Colors.white
),
),
style: TextStyle(
color: Colors.white,
),
),
SizedBox(height: 65.0,),
//submit button
FlatButton(
child: Text(
'SIGN IN',
style: TextStyle(
fontSize: 35.0,
color: Colors.white
),
),
onPressed: () {},
),
SizedBox(height: 10.0),
//forget password
FlatButton(
child: Text(
'FORGOT PASSWORD',
style: TextStyle(
color: Colors.white,
fontSize: 17.0
),
),
onPressed: () {},
)
];
}
Widget _formSignIn(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
children: _buildChildrenForm(),
),
);
}
#override
Widget build(BuildContext context) {
final double screenHeight = MediaQuery.of(context).size.height;
final double halfScreen = screenHeight / 2;
final double finalHeight = halfScreen / screenHeight;
debugPrint(MediaQuery.of(context).size.height.toString());
//debugPrint(MediaQuery.of(context).size.width.toString());
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
//bg image
FractionallySizedBox(
alignment: Alignment.topLeft,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/backgroundWithOpacity.png'),
fit: BoxFit.cover
)
),
),
),
//form
FractionallySizedBox(
alignment: Alignment.center,
heightFactor: 1 - finalHeight,
child: ListView(
children: <Widget>[
_formSignIn(context)
],
),
)
],
),
);
}
}

Answer 1

Use FittedBox for compressing the title in device width.
Use Align for centering, we need ListView only for keyboard appearences, normally the content you wanna show to the user is even small enough for iPhone 5s.
You have extra line of codes and I removed.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: SignIn(),
)));
}
class SignIn extends StatelessWidget {
List<Widget> _buildChildrenForm() => [
//logo
SizedBox(
width: double.infinity,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text('THE GUEST LIST',
style: TextStyle(
color: Colors.white, fontFamily: 'futura', fontSize: 60.0)),
),
),
//email
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
labelText: 'EMAIL',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
//hintText: 'DEMO#MAIL.COM',
hintStyle: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
//password
SizedBox(height: 20),
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
obscureText: true,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
labelText: 'PASSWORD',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
hintStyle: TextStyle(color: Colors.white),
),
style: TextStyle(
color: Colors.white,
),
),
//submit button
SizedBox(height: 65),
FlatButton(
child: Text(
'SIGN IN',
style: TextStyle(fontSize: 35.0, color: Colors.white),
),
onPressed: () {},
),
SizedBox(height: 10),
//forget password
FlatButton(
child: Text(
'FORGOT PASSWORD',
style: TextStyle(color: Colors.white, fontSize: 17.0),
),
onPressed: () {},
)
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
//bg image
FractionallySizedBox(
alignment: Alignment.topLeft,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/backgroundWithOpacity.png'),
fit: BoxFit.cover)),
),
),
//form
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: ListView(
shrinkWrap: true,
children: _buildChildrenForm(),
),
),
)
],
),
);
}
}

Answer 2

Avoid SizeConfig (custom class) and hard coded dimensions as much as you can.
Example: MediaQuery.of(context).size.width - someValue
Best easiest way to to make responsive UI for different screen size is Sizer plugin.
Check it this plugin ⬇️
https://pub.dev/packages/sizer

Answer 3

You can use SingleChildScrollView or ListView, and using relative proportions