How to make flutter widgets adaptive to different screen sizes

flutter responsive ui
flutter — effectively scale ui according to different screen sizes
flutter responsive font size
flutter aspect ratio
media query flutter
flutter responsive image
flutter layout builder
flutter screen size

I`m using width and height params of Container to determine widget size. but the widget is not adaptive if tested on other devices. I came from native android where i used to use density independent pixels(dp) that is adaptive to any screen size. what is the equivalent to dp in flutter ? I dont want to use MediaQuery every time to calculate screen width and height.

You can set the size of your UI widgets this way:

 width: 100.0 * MediaQuery.of(context).devicPixelRatio ,

the function MediaQuery.of(context).devicPixelRatio will return the actual number of pixel in each logical pixel, so you'll be sure that the same 100.0 pixel on your test device are typical to those of the user whatever screen density they have.

How to make flutter app responsive according to different screen size?, Using MediaQuery class: MediaQueryData queryData; queryData = MediaQuery. of(context);. MediaQuery: Establishes a subtree in which media queries resolve� This is where the power of Flutter comes in. Every widget in Flutter is by nature, reusable. Every widget in Flutter is like a Fragment. All we need to do is define two widgets. One for the master

You can use the SizeBox.expand widget to let your widget expand to take the available space regardless of size documentation



And if you want to keep an aspect ratio regardless of screen size you can use the AspectRatio widget documentation


 aspectRatio: 3/2,


If your widgets are just in a row or column and you want to add weights among them to fill the spaces you can use the Expanded widget

            flex: 1,//weight for the widget
            child: Container(
              color: Colors.amber,
              height: 100,


Developing for Multiple Screen Sizes and Orientations in Flutter , Making Adaptive Screens in Google's Flutter Mobile SDK OrientationBuilder is a widget which builds a layout or part of a layout on an� Depending on the screen size you can choose to build a different set of widgets. For instance, on a larger screen you may want to use a drawer that is always visible, while you may want to show it

i applied this way :

 class SizeConfig {
          static MediaQueryData _mediaQueryData;
          static double screenWidth;
          static double screenHeight;
          static double blockSizeHorizontal;
          static double blockSizeVertical;

          void init(BuildContext context) {
           _mediaQueryData = MediaQuery.of(context);
           screenWidth = _mediaQueryData.size.width;
           screenHeight = _mediaQueryData.size.height;
           blockSizeHorizontal = screenWidth / 100;
           blockSizeVertical = screenHeight / 100;

  class HomeScreen extends StatelessWidget {  @override  Widget
 build(BuildContext context) {  SizeConfig().init(context);  …  } }
     Widget build(BuildContext context) {
      return Center(
       child: Container(
        height: SizeConfig.blockSizeVertical * 20,
        width: SizeConfig.blockSizeHorizontal * 50,

Flutter — Effectively scale UI according to different screen sizes, Flutter — Effectively scale UI according to different screen sizes Since we have full control on all the pixels, we might want to draw a rectangle like this. We need to import 'widgets.dart' in order to use a very convenient� Handling Different Device Types and Screen Sizes. Your Flutter app can run on a phone, tablet, TV screen or (when they start supporting it) watch. Even within the category of phones there’s a large array of different resolutions and screen sizes. You need to make sure that the layout works as intended for each device type and screen size.

Responsive Design for Flutter: Getting Started, Use MediaQuery to adjust your app's UI layout based on different screen sizes. You can also Duration: 1:39 Posted: May 23, 2019 Create beautiful apps faster with Flutter’s collection of visual, structural, platform, and interactive widgets. In addition to browsing widgets by category, you can also see all the widgets in the widget index.

MediaQuery (Flutter Widget of the Week), Easily make Flutter apps responsive. Responsive Framework adapts your UI to different screen sizes class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( builder:� Adapting landing page’s Body. This is how Body's widget look from my previous posts.To make it responsive, we'll need different design implementations for each of the screen bucket. To keep

responsive_framework, Flutter and Mobile development tutorials and guides. over how you can create a shared widget that provides all the sizing functionality for a responsive UI I want to do this at an view (screen) level as well as a widget level. Widgets are classes used to build UIs. Widgets are used for both layout and UI elements. Compose simple widgets to build complex widgets. The core of Flutter’s layout mechanism is widgets. In Flutter, almost everything is a widget—even layout models are widgets. The images, icons, and text that you see in a Flutter app are all widgets.

  • Some sample code would help, maybe there's something wrong in your code.
  • well, any sample code will work. just use a container and set width and height and test it on different screen sizes
  • if i want to set the height and width of a widget to 100 , 50 respectively. how should i do this using your solution
  • height: 100.0 * MediaQuery.of(context).devicPixelRatio , width: 50.0 * MediaQuery.of(context).devicPixelRatio ,
  • Actually this is not a very reliable solution because devices can have ALOT of pixels per logical pixel and the spaces can be too big .
  • Thanks @OmarBoshra for your feedback! I'll check and return back to you.