4
votes

Comment aligner verticalement du texte à l'intérieur du conteneur

J'ai une mise en page Wrap avec des enfants Container . Chaque conteneur a un enfant, Text

Le Container a une hauteur fixe mais une largeur flexible.

Comment puis-je aligner verticalement le Texte à l'intérieur du Container ? J'ai essayé d'utiliser alignement: Alignment.centerLeft , mais la largeur du conteneur s'étend sur tout le parent.

Je ne peux pas définir la largeur du Container puisque je ne sais pas quelle sera la largeur du texte.

Wrap(
      spacing: 3.0, // gap between adjacent chips
      runSpacing: 3.0, // gap between lines
      children: <Widget>[
        new Container(
          height: 30,
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.circular(15),
          ),
          child: Text(
            'hallo',
            style: TextStyle(background: _paint,),
          ),
        ),
        ...

Voici à quoi il devrait ressembler - mais le texte rouge doit être centré verticalement:

flutter

0 commentaires

6 Réponses :

0
votes

Cela pourrait être un problème avec la propriété de peinture background: .

Si vous utilisez la suivante, dans mon cas, tout est centré verticalement et il n'est pas nécessaire d'ajouter un alignement. p>

style: TextStyle(background: Paint()..color = Colors.red),

0 commentaires

7
votes

Enveloppez votre Container dans une Colonne et définissez mainAxisAlignment sur Center

  new Container(
                  height: 30,
                  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'hallo',
                        style: TextStyle(background: _paint),
                      ),
                    ],
                  ),
                ),

1 commentaires

Dommage qu'il n'y ait pas de moyen moins piraté de faire cela, mais cela fonctionne.

6
votes

Je ne pense pas que nous devrions utiliser Column à des fins d'alignement. Une meilleure façon est d'utiliser le widget Align comme indiqué ci-dessous:

Container(
  height: 30,
  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
  decoration: BoxDecoration(
  color: Colors.grey[200],
    borderRadius: BorderRadius.circular(15),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Text(
      'hallo',
      style: TextStyle(background: _paint),
    ),
  ),
),

1 commentaires

Lorsque vous essayez cette approche, le conteneur utilise toute la largeur de l'écran, ce qui ne se produit pas lors de l'utilisation d'une colonne. Connaissez-vous un moyen d'éviter cela sans attribuer une largeur fixe?

1
votes

Pour aligner verticalement et horizontalement, utilisez simplement le widget Aligner:

   Align(
    alignment: Alignment.center,
    child: Text(
      'hallo',
    ),

0 commentaires

2
votes

           Container(
                alignment: Alignment.center,
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    border: Border.all(width: 1), color: Colors.blueGrey),
                child:Text('Enter a url')

              )

0 commentaires

0
votes

si vous enveloppez vos textes dans une ligne, ajoutez une propriété

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
      Text(ucfirst(activity.name),
        style: TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 21,),
    ),

comme

crossAxisAlignment: CrossAxisAlignment.center,

Cela devrait fonctionner pour vous si vous en avez plusieurs Widgets texte dans une ligne ou une seule, voir ma sortie ci-dessous.

0 commentaires