Design flutter app for different screen sizes using MediaQuery

So recently I have been working with flutter and I still can't believe how powerful and efficient this framework is. Kudos to flutter team for providing a great documentation and amazing support.
Let's dive right into the topic now!
When I was designing an app I came across a situation where I had to make the app look same on different screen sizes and I'm pretty sure all the app developers want their application to look fantastic in devices with different screen sizes. Fortunately, flutter provides amazing widgets to achieve this result without much effort.

# MediaQuery
MediaQuery is a great widget to make your app responsive across devices with different screen sizes. Let's get our hands dirty with some code!

Container(
  width: MediaQuery.of(context).size.width,
  color: Colors.blue,
  child: Text('I cover the whole width of the screen!')
)

The above code block will give us something like this

Let's understand the code now. We have a container with a text widget as a child and we set the width of container as
MediaQuery.of(context).size.width
this line makes the widget cover the whole width of the screen from end to end but what if we don't want our widget to cover only half of the screen's width or some percentage of if, well that's pretty easy too!
We just use some math to achieve this (don't worry it's not complex)
MediaQuery.of(context).size.width / 2
or
MediaQuery.of(context).size.width / 0.30
the above line will use 30% of the screen's width, pretty easy right?
Let's look at the height now, well it is same as width but one thing to consider here is the height includes everything from appbar to bottom of the screen so if you need to consider the whole screen height to decide the placement of your widget.

Container(
  width: MediaQuery.of(context).size.height,
  color: Colors.red,
  child: Center(
           child: Text('I cover the whole width of the screen!')
         )
)

Now, let's see some real use cases using MediaQuery. We are going to design a button which has a width matching the screen size with some padding.

Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: RaisedButton(
                child: Text("I'm a responsive button!",
                    style: Theme.of(context).textTheme.headline5,
                    textAlign: TextAlign.center)),
          ),

Complete example with code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.30,
            color: Colors.blue,
            child: Center(child:  Text("I cover 30% of the screen height and 100% of screen width!",
                    style: Theme.of(context).textTheme.headline5,
                    textAlign: TextAlign.center)),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: RaisedButton(
                child: Text("I'm a responsive button!",
                    style: Theme.of(context).textTheme.headline5,
                    textAlign: TextAlign.center)),
          ),
        ]));
  }
}

You can checkout the live example at codepen here:
Codepen workspace

Thanks for reading and like this article if you found it helpful!
Feel free to reach out to me through any of the following mediums.
sampathnarayanan72@gmail.com
LinkedIn
Github

Happy HacktoberFest :)