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 existe de nombreuses façons de le faire, j'en donne quelques exemples ici :

1. Utilisez SizedBox si vous souhaitez définir un espace spécifique

   Row(
     children: [
       Text("1"),
       SizedBox(width: 50), // give it width
       Text("2"),
     ],
   )

   

---

2. Utilisez Spacer si vous souhaitez les éloigner le plus possible.

   Row(
     children: [
       Text("1"),
       Spacer(), // use Spacer
       Text("2"),
     ],
   )

   

---

3. Utilisez mainAxisAlignment en fonction de vos besoins :

   Row(
     mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need
     children: [
       Text("1"),
       Text("2"),
     ],
   )

   

---

4. Utilisez Wrap à la place de Row et donnez un espacement

   Wrap(
     spacing: 100, // définissez l'espacement ici
     children: [
       Text("1"),
       Text("2"),
     ],
   )

   

---

5. Utilisez Wrap à la place de Row et donnez-lui un alignement

   Wrap(
     alignment: WrapAlignment.spaceAround, // définissez votre alignement
     children: [
       Text("1"),
       Text("2"),
     ],
   )

   

Answer 2

MainAxisAlignment

début - Placez les enfants aussi près du début de l'axe principal que possible.

fin - Placez les enfants aussi près de la fin de l'axe principal que possible.

centre - Placez les enfants aussi près du milieu de l'axe principal que possible.

spaceBetween - Placez l'espace libre de manière égale entre les enfants.

spaceAround - Placez l'espace libre de manière égale entre les enfants ainsi que la moitié de cet espace avant et après le premier et le dernier enfant.

spaceEvenly - Placez l'espace libre de manière égale entre les enfants ainsi qu'avant et après le premier et le dernier enfant.

Exemple:

  child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('Ligne1'),
          Text('Ligne2')
        ],
      )

Answer 3

Suppression de l'espace - :

new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                child: new Text('Vous n'avez pas de compte?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                onTap: () {},
              ),
              GestureDetector(
                onTap: (){},
                  child: new Text(
                'S'inscrire.',
                style : new TextStyle(
                    color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
              ))
            ],
          ),

OU

GestureDetector(
            onTap: (){},
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new Text('Vous n'avez pas de compte?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                new Text(
                  'S'inscrire.',
                  style: new TextStyle(
                  color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),

Answer 4

Vous pouvez utiliser des espaces réservés si tout ce que vous voulez est un peu d'espace entre les éléments d'une ligne. L'exemple ci-dessous centre 2 widgets Text dans une ligne avec un peu d'espace entre eux.

Spacer crée un espaceur vide et ajustable qui peut être utilisé pour ajuster l'espacement entre les widgets dans un conteneur Flex, comme Row ou Column.

Dans une row, si nous voulons mettre de l'espace entre deux widgets de manière à occuper tout l'espace restant.

    widget = Row (
    children: [
      Spacer(flex: 20),
      Text(
        "Element #1",
      ),
      Spacer(),  // Par défaut flex: 1
      Text(
        "Element #2",
      ),
      Spacer(flex: 20),
    ]
  );

Answer 5

Ligne(
 enfants: [
  Flexible(
   child: TextFormField()),
  Container(width: 20, height: 20),
  Flexible(
   child: TextFormField())
 ])

Cela fonctionne pour moi, il y a 3 widgets à l'intérieur de la ligne: Flexible, Container, Flexible