L'équivalent de wrap_content et match_parent dans flutter?

Dans Android match_parentet wrap_contentsont utilisés pour redimensionner les widgets automatiquement par rapport à leur parent au contenu que le widget contient.

Dans Flutter, il semble que tous les widgets sont définis par défaut sur wrap_content, comment le changerais-je de manière à pouvoir le remplir widthet heightà celui de son parent?

Vous pouvez le faire avec un petit truc: supposons que vous ayez besoin de: (Largeur, Hauteur)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

Pour obtenir un comportement pour match_parent et wrap_content nous devons utiliser mainAxisSize propriété en ligne / colonne widget, le mainAxisSize propriété prend MainAxisSize ENUM ayant deux valeurs qui est MainAxisSize.min qui se comporte comme wrap_content et MainAxisSize.max qui se comporte comme match_parent .

Lien de l'article original

La réponse courte est que le parent n'a pas de taille tant que l'enfant n'a pas une taille.

La façon dont la mise en page fonctionne dans Flutter est que chaque widget fournit des contraintes à chacun de ses enfants, comme "vous pouvez être aussi large, vous devez être aussi grand, vous devez être au moins aussi large", ou autre (en particulier, ils obtenir une largeur minimale, une largeur maximale, une hauteur minimale et une hauteur maximale). Chaque enfant prend ces contraintes, fait quelque chose et choisit une taille (largeur et hauteur) qui correspond à ces contraintes. Ensuite, une fois que chaque enfant a fait son travail, le widget peut choisir sa propre taille.

Certains widgets essaient d'être aussi gros que le parent le permet. Certains widgets essaient d'être aussi petits que le parent le permet. Certains widgets essaient de correspondre à une certaine taille "naturelle" (par exemple du texte, des images).

Certains widgets indiquent à leurs enfants qu'ils peuvent avoir la taille de leur choix. Certains donnent à leurs enfants les mêmes contraintes que leurs parents.

Il existe en fait quelques options disponibles:

Vous pouvez utiliser SizedBox.expand pour que votre widget corresponde aux dimensions des parents, ou SizedBox (width: double.infinity) pour ne correspondre qu'à la largeur ou SizedBox (heigth: double.infinity) pour ne correspondre qu'à la hauteur.

Si vous voulez un comportement wrap_content, cela dépend du widget parent que vous utilisez, par exemple si vous mettez un bouton sur une colonne, il se comportera comme wrap_content et pour l'utiliser comme match_parent, vous pouvez envelopper le bouton avec un widget étendu ou une sizebox.

Avec un ListView, le bouton obtient un comportement match_parent et pour obtenir un comportement wrap_content, vous pouvez l'envelopper avec un widget Flex comme Row.

L'utilisation d'un widget Développé permet à un enfant d'une ligne, d'une colonne ou d'un Flex de se développer pour remplir l'espace disponible dans l'axe principal (par exemple, horizontalement pour une ligne ou verticalement pour une colonne). https://docs.flutter.io/flutter/widgets/Expanded-class.html

L'utilisation d'un widget flexible donne à l'enfant d'une ligne, d'une colonne ou d'un flex la flexibilité de s'étendre pour remplir l'espace disponible dans l'axe principal (par exemple, horizontalement pour une ligne ou verticalement pour une colonne), mais, contrairement à Expanded, Flexible ne le fait pas demander à l'enfant de remplir l'espace disponible. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Une solution de contournement simple:

Si un conteneur n'a qu'un seul enfant de niveau supérieur, vous pouvez spécifier la propriété d'alignement pour l'enfant et lui donner toute valeur disponible. cela remplira tout l'espace du conteneur.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Autrement:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

J'ai utilisé cette solution, vous devez définir la hauteur et la largeur de votre écran à l'aide de MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Utilisez le widget Wrap.

Pour Columnun comportement similaire, essayez:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Pour Rowun comportement similaire, essayez:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Pour plus d'informations: Wrap (Flutter Widget)

Utilisez cette ligne de codes à l'intérieur de la colonne. Pour wrap_content: mainAxisSize: MainAxisSize.min Pour match_parent:mainAxisSize: MainAxisSize.max

Il existe en fait un moyen très simple et soigné de le faire.

Utilisez un FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Ce widget est également très utile lorsque vous souhaitez dimensionner votre enfant à une fraction de la taille de son parent.

Exemple:

Si vous voulez que l'enfant occupe 50% de la largeur de son parent, indiquez widthFactorcomme0.5

Pour qu'un enfant remplisse son parent, enveloppez-le simplement dans une FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )