232 votes

Dimensionnement des éléments en fonction du pourcentage de la largeur/hauteur de l'écran

Existe-t-il un moyen simple (sans LayoutBuilder) de dimensionner un élément par rapport à la taille de l'écran (largeur/hauteur) ? Par exemple, comment puis-je définir la largeur d'une CardView pour qu'elle corresponde à 65 % de la largeur de l'écran ?

Cela ne peut pas être fait à l'intérieur de la build (évidemment), il faudrait donc la reporter après la construction. Existe-t-il un endroit privilégié pour placer une logique de ce type ?

1 votes

Je dis simplement que ce n'est généralement pas une bonne pratique, c'est de la conception web. Dans les applications, vous devez généralement utiliser les pixels de l'appareil pour définir les tailles, et utiliser Paddings pour insérer vos widgets, puisque le rapport d'aspect est presque toujours le même (sauf pour les tablettes).

20 votes

Après un an et demi de plus, il semble que ce ne soit pas une si mauvaise idée après tout. Chaque mois, de nouveaux téléphones sortent avec des proportions de plus en plus étranges.

298voto

Suragch Points 197

Il s'agit d'une réponse complémentaire montrant la mise en œuvre de quelques-unes des solutions mentionnées.

Boîte à dimensions fractionnées

Si vous n'avez qu'un seul widget, vous pouvez utiliser une balise FractionallySizedBox pour spécifier un pourcentage de l'espace disponible à remplir. Ici, le vert Container est réglé pour remplir 70% de la largeur et 30% de la hauteur disponibles.

FractionallySizedBox

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

Élargi

Le site Expanded permet à un widget de remplir l'espace disponible, horizontalement s'il se trouve dans une ligne, ou verticalement s'il se trouve dans une colonne. Vous pouvez utiliser la fonction flex avec plusieurs widgets pour leur donner du poids. Ici, le vert Container occupe 70% de la largeur et le jaune Container prend 30% de la largeur.

Expanded

Si vous voulez le faire verticalement, il suffit de remplacer Row avec Column .

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

Code supplémentaire

Voici le main.dart pour votre référence.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}

275voto

Ian Hickson Points 104

FractionallySizedBox peut également être utile. Vous pouvez également lire la largeur de l'écran directement à partir de MediaQuery.of(context).size et créer une boîte de taille basée sur cela

MediaQuery.of(context).size.width * 0.65

si vous voulez vraiment que la taille soit une fraction de l'écran, quelle que soit la mise en page.

134voto

Keshav Aditya R.P Points 1032

Cela pourrait être un peu plus clair :

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

J'espère que cela a résolu votre problème.

18voto

Collin Jackson Points 29995

Vous pouvez construire une colonne ou une ligne avec Flexible ou des enfants étendus dont les valeurs flexibles s'additionnent aux pourcentages que vous souhaitez.

Vous pouvez également trouver le AspectRatio widget utile.

8voto

Nitin Mehta Points 117
MediaQuery.of(context).size.width

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X