web-dev-qa-db-fra.com

Comment centrer le texte verticalement et horizontalement dans Flutter?

J'aimerais savoir comment centrer le contenu d'un widget Texte verticalement et horizontalement dans Flutter. Je sais seulement comment centrer le widget lui-même en utilisant Center(child: Text("test")) mais pas le contenu lui-même, il est aligné par défaut à gauche. Dans Android, je pense que la propriété d'un TextView qui réalise ceci s'appelle gravity.

Exemple de ce que je veux:

centered text example

user-interfacetextwidgetalignmentflutter
28
jeroen-meijer

Vous pouvez utiliser la propriété TextAlign du constructeur Text.

Text("text", textAlign: TextAlign.center,)
59
Tree

La propriété de centre d'alignement de texte définissant seulement l'alignement horizontal.

enter image description here

J'ai utilisé le code ci-dessous pour définir le texte verticalement et horizontalement au centre.

enter image description here

Code:

      child: Center(
        child: new Text(
        "Keerthanai Songs",
        textAlign: TextAlign.center,
        ),
      )
48
Shelly Pritchard

Je pense qu'une option plus flexible consisterait à envelopper la Text() avec Align() comme suit:

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

L'utilisation de Center() semble ignorer entièrement TextAlign sur le widget Texte. Il n'alignera pas TextAlign.left ni TextAlign.right si vous essayez, il restera au centre.

11
Mike

L'élément de texte à l'intérieur du centre de SizedBox fonctionne beaucoup mieux, en dessous de l'exemple de code

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

Profitez du codage ???? ‍ ????

1
Ramesh R C