How to add padding or margin according to different screen sizes

Viewed 4509

I want to give padding or margin according to screen sizes.

Below is code and images of two different sizes screens with same padding.

This is my code:

    Padding(
            padding: const EdgeInsets.only(top: 160, left: 90, bottom: 20),
            child: Row(
              children: <Widget>[
                Image.asset(
                  'assets/logo.png',
                  height: 70,
                  width: 70,
                ),
                Text(
                  '  Whatsapp',
                  style: TextStyle(
                    fontSize: 26,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

My real device

enter image description here

Android Studio emulator

enter image description here

4 Answers

You can create two methods that accept BuildContext

double deviceHeight(BuildContext context) => MediaQuery.of(context).size.height;

double deviceWidth(BuildContext context) => MediaQuery.of(context).size.width;

And if you want uniform margin regardless of device width or height, use it like this

Padding(
        padding: EdgeInsets.only(
          top: deviceHeight(context) * 0.3,
          left: deviceWidth(context) * 0.09,
          bottom: deviceHeight(context) * 0.06,
        ),
        child: Row(
          children: <Widget>[
            Image.asset(
              'assets/logo.png',
              height: 70,
              width: 70,
            ),
            Text(
              '  Whatsapp',
              style: TextStyle(
                fontSize: 26,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),

deviceHeight(context) * 0.3 simply means 30% of the screen Height, deviceWidth(context) * 0.09 means 9% of the screen Width & bottom: deviceHeight(context) * 0.06 means 6% of the screen Height

The advantage here is that you can adjust the figures to match, and it will take equal spacing on any device.

Your can use MediaQuery.of(context).size.height to get height of your screen and MediaQuery.of(context).size.width to get width of your screen.

According to your image, it will be better to use Flex widgets like Expanded, Spacer, Flexible to adjust the spacing between the widgets inside Column.

use flutter_screenutil

change code to:

 Padding(
            padding: const EdgeInsets.only(top: 160.w, left: 90.w, bottom: 20.w),
            child: Row(
              children: <Widget>[
                Image.asset(
                  'assets/logo.png',
                  height: 70.w,
                  width: 70.w,
                ),
                Text(
                  '  Whatsapp',
                  style: TextStyle(
                    fontSize: 26.sp,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

In w, h, r, you can use w first, and then you can choose the corresponding one according to the actual situation.

in terms of android and IOS we can easily say that the padding in android commonly used as 16 and in case of IOS padding for an commom page is 18

Related