CODEWITHSUNDEEP
flutterdartresponsive-designresponsive
Arjun Mahar
Arjun Mahar

Reputation: 367

How to add padding or margin according to different screen sizes

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

Upvotes: 8

Views: 10056

Answers (4)

Noble CT
Noble CT

Reputation: 9

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

Upvotes: -1

Zhuoyuan.Li
Zhuoyuan.Li

Reputation: 358

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.

Upvotes: 2

Brendan
Brendan

Reputation: 1157

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.

Upvotes: 7

KumarSunil17
KumarSunil17

Reputation: 223

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.

Upvotes: 4

Related Questions