How to Make Responsive Design In Flutter ?

· 2 min read
How to make responsive design in Flutter
How to make responsive design in Flutter

A common problem with the mobile design is that design has to suitable as per different platforms and different screen size so in this article we will go through How to Make Responsive Design In Flutter?

How to Make Responsive Design In Flutter?

Using MediaQuery class: It Establishes a subtree in which media queries resolve to the given data.

MediaQueryData: Information about a piece of media (e.g., a window).

MediaQueryData queryData;
queryData = MediaQuery.of(context);

To get Device Pixel Ratio:


To get the width and height of the device screen:


To get text scale factor:


Using AspectRatio class: AspectRatio Widget is a widget that attempts to size the child to a specific aspect ratio.

The widget first tries the largest width permitted by the layout constraints. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height.

new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,

Users can use  flutter_responsive_screen.

Function hp = Screen(MediaQuery.of(context).size).hp;
Function wp = Screen(MediaQuery.of(context).size).wp;
Example :
return Container(height: hp(27),weight: wp(27));


In this article, we have been through How to Make Responsive Design In Flutter? 

Still, need support for Flutter Development?

Keep Fluttering !!!
Keep Learning !!! is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a comment

Your email address will not be published. Required fields are marked *