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

Question

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 ?

Answer 1

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.

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.

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 ...
}

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

MediaQuery.of(context).size.width