Le Tutoriel de Flutter Expanded

Expanded
child
flex

1. Expanded

Expanded est un widget qui permet d'élargir l'espace d'un widget enfant de Row ou Column conformément à l'axe principal. Notamment, l'axe principal de Row est l'axe horizontal et l'axe principal de Column est l'axe vertical.

Expanded Constructor

const Expanded(
    {Key key,
    int flex: 1,
    @required Widget child}
)

Tout d'abord, veuillez prendre l'illustration ci-dessous à titre d'exemple. Dans cet exemple, un objet Row a cinq widgets enfants. La question est de savoir comment agrandir horizontalement l'espace pour les 2ème et 4ème widgets enfants.

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Icon(Icons.ac_unit, size: 32, color: Colors.red),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Icon(Icons.add_circle, size: 96, color: Colors.green),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

Enveloppant un widget enfant Row dans un objet Expanded, il élargit l'espace horizontalement et occupe le reste de l'espace Row.

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
        child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Expanded(
        child: Icon(Icons.add_circle, size: 96, color: Colors.green),
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

2. child

@required Widget child

3. flex

La propriété flex est considérée comme le poids de la propriété Expanded. Il détermine la quantité d'espace allouée à Expanded. L'espace alloué est proportionnel à la valeur flex. La valeur par défaut de flex est 1.

int flex: 1

flex (ex1)

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
        child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
        flex: 3
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Expanded(
        child: Icon(Icons.add_circle, size: 96, color: Colors.green),
        flex: 2
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

flex (ex2)

Column (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
          child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
          flex: 3
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(90, 30))
          )
      ),
      Expanded(
          child: Icon(Icons.add_circle, size: 96, color: Colors.green),
          flex: 2
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

Le Tutoriel de Flutter Expanded

1. Expanded

2. child

3. flex

Tutoriels de programmation Flutter

Tutoriels de programmation Flutter

Articles les plus récents