Le Tutoriel de Flutter Expanded
View more Tutorials:
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:(){}), ] )
@required Widget child
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:(){}), ] )