CODEWITHSUNDEEP
dartflutterflutter-layout
M.Ali
M.Ali

Reputation: 10235

How to make flutter widgets adaptive to different screen sizes

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.

Upvotes: 1

Views: 8445

Answers (3)

Omar Boshra
Omar Boshra

Reputation: 477

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

SizedBox.expand(

  child:MyButton(),
),

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

AspectRatio(

 aspectRatio: 3/2,

  child:MyButton(),
),

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 

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

,

Upvotes: 2

Eduardo Schmidt
Eduardo Schmidt

Reputation: 31

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);  …  } }
     @override
     Widget build(BuildContext context) {
      return Center(
       child: Container(
        height: SizeConfig.blockSizeVertical * 20,
        width: SizeConfig.blockSizeHorizontal * 50,
        color: Colors.orange,
       ),
      );
     }

https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a

Upvotes: 0

Mazin Ibrahim
Mazin Ibrahim

Reputation: 7869

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.

Upvotes: 1

Related Questions