title: Flutter - Responsive ui for different screen sizes
body: <p>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.</p>
  
  <p>I am working with a Stack and FractionallySizedBox but not sure if what I am doing is correct. Any help is appreciate.</p>
  
  <p>Code is available here -> <a href="https://gist.github.com/GY22/1eefb5e48fdca9d785365cbccbdcb478" rel="nofollow noreferrer">https://gist.github.com/GY22/1eefb5e48fdca9d785365cbccbdcb478</a></p>
  
  <p><a href="https://i.stack.imgur.com/7ZWOM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ZWOM.jpg" alt="enter image description here"></a></p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class SignIn extends StatelessWidget {
      //textfields + logo
      List&lt;Widget&gt; _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: &lt;Widget&gt;[
                      //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: &lt;Widget&gt;[
                                  _formSignIn(context)
                              ],
                          ),
                      )
                  ],
              ),
  
  
  
  
          );
      }
  }
  </code></pre>