wake-up-neo.com

Wie zentriere ich Text in Flutter vertikal und horizontal?

Ich möchte wissen, wie man den Inhalt eines Text-Widgets in Flutter vertikal und horizontal zentriert. Ich kann nur das Widget selbst mit Center(child: Text("test")) zentrieren, aber nicht den Inhalt selbst, er ist standardmäßig linksbündig ausgerichtet. Unter Android wird die Eigenschaft einer TextView, mit der dies erreicht wird, als gravity bezeichnet.

Beispiel für das, was ich will:

centered text example

user-interfacetextwidgetalignmentflutter
28
jeroen-meijer

Sie können die Eigenschaft TextAlign des Konstruktors Text verwenden.

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

Die Eigenschaft "Textausrichtungsmitte" legt nur die horizontale Ausrichtung fest.

enter image description here

Ich habe den folgenden Code verwendet, um den Text vertikal und horizontal zu zentrieren.

enter image description here

Code:

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

Ich denke, eine flexiblere Option wäre, die Text() mit Align() wie folgt zu umschließen:

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

Die Verwendung von Center() scheint TextAlign im Text-Widget vollständig zu ignorieren. Es wird nicht TextAlign.left Oder TextAlign.right Ausgerichtet, wenn Sie versuchen, es wird in der Mitte bleiben.

11
Mike

Das Textelement in der Mitte von SizedBox funktioniert unter dem Beispielcode viel besser

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
);
}

Viel Spaß beim Codieren ???? ‍ ????

1
Ramesh R C