Définir l'espace entre les éléments dans Row Flutter

Question

Code:

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              new FlatButton(
                child: new Text('Vous n'avez pas de compte?', style: new TextStyle(color: Color(0xFF2E3233))),
              ),
              new FlatButton(
                child: new Text('S'inscrire.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
                onPressed: moveToRegister,
              )
            ],
          ),
        ),  

Et voici le résultat : https://dartpad.dev/?id=6bbfc6139bdf32aa7b47eebcdf9623ba

Comment corriger le fait que les deux éléments FlatButton soient côte à côte sans espace entre le centre de la largeur de l'écran?

Answer 1

Il suffit d'ajouter "Container(width: 5, color: Colors.transparent)," entre les éléments

new Container(
      alignment: FractionalOffset.center,
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new FlatButton(
            child: new Text('Vous n'avez pas de compte?', style: new TextStyle(color: Color(0xFF2E3233))),
          ),
            Container(width: 5, color: Colors.transparent),
          new FlatButton(
            child: new Text('S'inscrire.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
            onPressed: moveToRegister,
          )
        ],
      ),
    ),

Answer 2

Je crois que le message original concernait la suppression de l'espace entre les boutons dans une ligne, et non l'ajout d'un espace.

La astuce est que l'espace minimum entre les boutons était dû au rembourrage intégré dans les boutons dans le cadre de la spécification de design matériel.

Donc, n'utilisez pas de boutons! Mais plutôt un GestureDetector à la place. Ce type de widget offre la fonctionnalité onClick / onTap mais sans le style.

Voir ce post pour un exemple.

https://stackoverflow.com/a/56001817/766115

Answer 3

Pour créer un espacement précis, j'utilise Padding. Voici un exemple avec deux images :

Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Image.asset('images/user1.png'),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Image.asset('images/user2.png'),
        ),
      )
    ],
  ),