Comment ajouter un rembourrage ou une marge en fonction de la taille de l'écran ?

Question

Je veux donner un padding ou une marge en fonction de la taille de l'écran.

Voici le code et les images de deux écrans de tailles différentes avec le même padding.

Voici mon 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,
                  ),
                ),
              ],
            ),
          ),

Mon appareil réel

Émulateur Android Studio

Answer 1

Vous pouvez créer deux méthodes qui acceptent BuildContext

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

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

Et si vous voulez une marge uniforme quelle que soit la largeur ou la hauteur du périphérique, utilisez-le comme suit

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 signifie simplement 30% de la hauteur de l'écran, deviceWidth(context) * 0.09 signifie 9% de la largeur de l'écran & bottom: deviceHeight(context) * 0.06 signifie 6 % de la hauteur de l'écran

L'avantage est que vous pouvez ajuster les chiffres pour qu'ils correspondent, et que l'espacement sera le même sur tous les appareils.

Answer 2

Vous pouvez utiliser MediaQuery.of(context).size.height pour obtenir la hauteur de votre écran et MediaQuery.of(context).size.width pour obtenir la largeur de votre écran.

D'après votre image, il serait préférable d'utiliser des widgets Flex tels que Expanded , Spacer , Flexible pour ajuster l'espacement entre les widgets à l'intérieur de Column.