Le dimensionnement des éléments en pourcentage de la largeur de l'écran/hauteur

Est-il un simple (non-LayoutBuilder) de la taille d'un élément par rapport à la taille de l'écran (largeur/hauteur)? Par exemple: comment puis-je définir la largeur d'un CardView à 65% de la largeur de l'écran.

Il ne peut pas être fait à l'intérieur de la build méthode (évidemment), de sorte qu'il devrait être différée jusqu'à la post-construction. Est-il un endroit préféré pour mettre de la logique comme ça?

OriginalL'auteur Luke | 2017-03-30

  1. 34

    FractionallySizedBox peut également être utile.
    Vous pouvez aussi consulter la largeur de l'écran directement de MediaQuery.de(contexte), et créer un de la taille de la boîte en fonction de ça, si vous voulez vraiment à la taille comme une fraction de l'écran, indépendamment de ce que la mise en page est.

    OriginalL'auteur Ian Hickson

  2. 68

    Cela pourrait être un peu plus clair:

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

double 65_width = width * 0.65;

    Espère que cela a résolu votre problème.

    OriginalL'auteur Keshav Aditya R.P

  3. 14

    C'est un complément de réponse montrant la mise en œuvre d'un couple de solutions mentionnées.

    FractionallySizedBox

    Si vous avez un seul widget, vous pouvez utiliser un FractionallySizedBox widget de spécifier un pourcentage de l'espace disponible à remplir. Ici, le vert Container est mis à remplir de 70% de la largeur disponible et 30% de la hauteur disponible.

    Le dimensionnement des éléments en pourcentage de la largeur de l'écran/hauteur

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

    Élargi

    La Expanded widget permet un widget pour remplir l'espace disponible, à l'horizontale, si elle est dans une rangée, ou à la verticale si elle est dans une colonne. Vous pouvez utiliser le flex propriété avec plusieurs widgets pour leur donner le poids. Ici, le vert Container prend 70% de la largeur et le jaune Container prend 30% de la largeur.

    Le dimensionnement des éléments en pourcentage de la largeur de l'écran/hauteur

    Si vous voulez le faire à la verticale, puis 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

    Ici est la main.dart code 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 ...
}
    Cela devrait être la bonne façon de le faire

    OriginalL'auteur Suragch

  4. 7

    Vous pouvez créer une Colonne/Ligne avec Flexible ou Élargi les enfants qui ont flex valeurs qui s'ajoutent à l'pourcentages que vous voulez.

    Vous pouvez également trouver les AspectRatio widget utile.

    OriginalL'auteur Collin Jackson

  5. 5
    MediaQuery.of(context).size.width
    Est-ce réellement répondre à la question? Ne sais pas comment il est arrivé upvotes. Même une meilleure solution a déjà été fournis ci-dessus qui utilise MediaQuery, vous pourriez avoir upvoted au lieu de faire votre propre réponse.

    OriginalL'auteur Nitin Mehta

  6. 4

    vous pouvez utiliser MediaQuery avec le contexte actuel de votre widget et obtenir la largeur ou la hauteur comme ceci

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

    après cela, vous pouvez multiplier avec le pourcentage que vous voulez

    OriginalL'auteur parth jansari

  7. 1

    si vous utilisez GridView vous pouvez utiliser quelque chose comme Ian Hickson la solution.

    crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4

    OriginalL'auteur Rody Davis