How to make this screen responsive in Flutter?

Question

I'm kinda confused with how responsive layouts are made with flutter can you guys point me to the right direction or where in my codes will be wrapped in Expanded widget?

I tried wrapping the containers with Extended but It keeps showing an error and I'm getting confused now. I'm still a beginner, to be honest. Thank you very much!

Also, when I searched I found out that I should avoid using hardcoded sizes most of the time. So I want to learn when to apply Extended widget in order to make my screen responsive.

my code is below:

import 'package:flutter/material.dart';

class RegisterPage extends StatefulWidget {
  RegisterPage({Key key}) : super(key: key);

  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xff0D192A),
        body: Container(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Container(
                      height: 200,
                      width: 200,
                      child: Image(
                        image: AssetImage("assets/images/vlogo.png"),
                      ),
                    ),
                  ),
                  Padding(
                      padding: EdgeInsets.all(40.0),
                      child: Center(
                        child: Text("Register an Account",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 20)),
                      )),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text("Email Address",
                                style: TextStyle(
                                    fontSize: 10.0, color: Colors.grey[400])),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height:10.0),
                  Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter your email address",
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          ),
                        ),
                      )
                      ),
                  SizedBox(height:20.0),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text("Choose Password",
                                style: TextStyle(
                                    fontSize: 10.0, color: Colors.grey[400])),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height:10.0),
                  Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter your email address",
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          ),
                        ),
                      )
                      ),
                     SizedBox(height: 50),
                     Padding(
                       padding:  EdgeInsets.fromLTRB(20, 0, 20, 0),
                       child: InkWell(
                         onTap: () {
                           setState(() {

                           });
                         },
                           child: Container(
                           height: 50,
                           decoration: BoxDecoration(
                             color: Color.fromRGBO(211, 184, 117, 100)
                           ),
                           child: Center(
                             child: Text("Login", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
                             ),
                           ),
                         ),
                       ),
                     ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Explore this plugin: This is one of the most effective plugins I have ever used for making responsive design.

https://pub.dev/packages/responsive_screen

Or

Use MediQuery() for getting the screen height and width i.e:-

Example: 

 @override
  Widget build(BuildContext context) {
     dynamic screenHeight = MediaQuery.of(context).size.height;
     dynamic screenwidth = MediaQuery.of(context).size.width;

   //use screenHeight and screenWidth variable for defining the height and 
   //width of the Widgets.

   return Container(
       height:screenHeight * .2,  //It will take the 20%  height of the screen
       width: screenwidth * .5,  //It will take the 50% width of the screen
       //height: screenHeight,   //It will take 100% height

       child: Image(
         image: AssetImage("assets/images/vlogo.png"),
      );



   }

Answer 2

You can make each screen responsive in flutter by just using MediaQuery or LayoutBuilder Concepts.

For your application, replace all your custom sizes like

width : MediaQuery.of(context).size.width * 0.1
height : MediaQuery.of(context).size.height * 0.3

MediaQuery gives you the sizes and orientation of the screen.

Even your padding, margin and other dimensions also should be calculated using MediaQuery to make it responsive.

Here, MediaQuery.of(context).size.width will give you the width of the current device screen and MediaQuery.of(context).size.height will give you the height of the current device screen.

Also, you can use LayoutBuilder Widget like,

LayoutBuilder(
    builder: (context, constraints) {
        if(constraints.maxWidth > 500) {
            getLandscapeLayout();
        } else {
            getPortraitLayout();
        }
    },
)

LayoutBuilder is a widget which provides the dimensions of its parent so we can know how much space we have for the widget and can build it our child accordingly.

So these are two most powerful concepts are available in flutter to make your apps fully responsive.