Flutter - Responsive ui for different screen sizes

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

You can use SingleChildScrollView or ListView, and using relative proportions

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

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