Comment centrer un seul élément dans une rangée de 2 éléments en flottement
Dans ma mise en page, j'ai deux widgets d'affilée, un texte et une icône.
Comme indiqué ci-dessous, supposons que * se réfère à l'icône et en utilisant "-" pour représenter la ligne:
----------------------------
Text *
----------------------------
Comment faire pour centrer mon texte sur toute la ligne et l'icône à droite?
La principale chose que vous devez noter est que si vous ne voulez pas utiliser Stack, vous devez fournir les mêmes widgets consommant de la largeur à gauche et à droite.
Je le ferais avec Expanded et Padding
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 32.0),
child: Text(
"Text",
textAlign: TextAlign.center,
),
),
),
Icon(Icons.add, size: 32.0,)
],
)
ou avec RowmainAxisAlignment et un Container
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(width: 32.0, height: 0.0),
Text("Text"),
Icon(Icons.add, size: 32.0)
],
)
ou avec Expanded et un Container sur la gauche au lieu du remplissage :). Le remplissage ou le conteneur supplémentaire sur la gauche est de sorte que le textAlign va vraiment centrer le texte dans la ligne en tenant compte de l'espace occupé par l'icône.
Utilisez simplement les widgets Expanded et Spacer sur le côté gauche/droit et placez votre widget dans le Expanded:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Spacer(),
framedContainerWithText,
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: IconButton(
icon: Icon(Icons.delete),
color: Colors.red,
onPressed: () {},
),
),
),
],
),
Résultat: 
Il existe un moyen simple de le faire.
Row(
children: <Widget>[
Expanded( // 1st use Expanded
child: Center(child: Text("Center")), // 2nd wrap your widget in Center
),
Text("*"),
],
)