Définir la largeur de la colonne en flutter

Question

J'ai besoin de définir la largeur d'une colonne dans Flutter. Je dois faire une mise en page avec 3 sections, l'une devant occuper 20% de l'écran, l'autre 60% et la dernière 20%. Je sais que ces 3 colonnes doivent être alignées, mais je ne connais pas de moyen de définir la taille, quand je fais cela, les 3 colonnes prennent la même taille.

J'apprécierai tout commentaire.

Answer 1

Au lieu de coder en dur la taille, je suggère d'utiliser Flex comme

Row(
      children: <Widget>[
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 6, // 60%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.blue),
        )
      ],
    )

Ce qui donnera le résultat suivant,

Answer 2

Limiter la width d'un Column pourrait être

1. Limiter la width de Column lui-même, utilisez SizedBox

   SizedBox(
     width: 100, // set this
     child: Column(...),
   )

2 (A). Limite width de children à l'intérieur de Column , sans codage en dur des valeurs

Row(
  children: <Widget>[
    Expanded(
      flex: 3, // takes 30% of available width 
      child: Child1(),
    ),
    Expanded(
      flex: 7, // takes 70% of available width  
      child: Child2(),
    ),
  ],
)

2 (B). Limite width de children à l'intérieur de Column , avec des valeurs codées en dur .

Row(
  children: <Widget>[
    SizedBox(
      width: 100, // hard coding child width
      child: Child1(),
    ),
    SizedBox(
      width: 200, // hard coding child width
      child: Child2(),
    ),
  ],
)