Wie zentriere ich Text in Flutter vertikal und horizontal?

113

Ich möchte wissen, wie der Inhalt eines Text-Widgets in Flutter vertikal und horizontal zentriert wird. Ich weiß nur, wie man das Widget selbst zentriert, Center(child: Text("test"))aber nicht den Inhalt selbst. Es ist standardmäßig linksbündig ausgerichtet. In Android glaube ich, dass die Eigenschaft einer TextView, die dies erreicht, aufgerufen wird gravity.

Beispiel für das, was ich will:

— Jeroen-Meijer
quelle

245

Eigenschaftseinstellung für Textausrichtungszentrum nur horizontale Ausrichtung.

Ich habe den folgenden Code verwendet, um den Text vertikal und horizontal in der Mitte festzulegen.

Code:

      child: Center(
        child: Text(
          "Hello World",
          textAlign: TextAlign.center,
        ),
      ),

— Shelly Pritchard
quelle

1

@Shelly In einigen Fällen funktioniert es nicht. Sie müssen die Eigenschaft heightFactor: auch hinzufügen, z. B.: Center (heightFactor: 2.3, child: Text ('SELFIE', textAlign: TextAlign.center, style: TextStyle (fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold,)),),

— Sanjeev Sangral

Ich warf einen Blick darauf und stimmte zu. Dies wurde geändert, um die richtige Antwort zu sein, da es horizontal und vertikal zentriert ist.

— Jeroen-Meijer

82

Sie können die TextAlignEigenschaft des TextKonstruktors verwenden.

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

— Baum
quelle

34

Ich bin nicht sicher, warum dies als Antwort markiert wurde, da dies nur den Text horizontal zentriert, aber die Frage fragt nach horizontal und vertikal.

— Herohtar

2

Ja, dies sollte entfernt werden, es beantwortet die Frage nicht.

— Hasen

48

Ich denke , eine flexiblere Möglichkeit wäre, das umwickeln Text()mit Align()etwa so:

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

Die Verwendung Center()scheint TextAlignim Text-Widget vollständig zu ignorieren . Es wird nicht ausgerichtet TextAlign.leftoder TextAlign.rightwenn Sie es versuchen, bleibt es in der Mitte.

— Mike
quelle

1

Viel bessere Antwort ist diese.

— Nikola Jovic

Dies sollte die markierte Antwort sein, da die Frage lautet, wie ein Text horizontal und vertikal zentriert werden soll. Vielen Dank!

— Ali Gürelli

Diese Antwort sollte definitiv die akzeptierte sein

— Tom Ryan

Dies ist die Antwort, Leute, die sich nur fragen, warum mein Text nicht mit einer größeren Schriftgröße übereinstimmt. Es stellt sich heraus, dass das Zentrum seltsam mit Text ist und es einen Haltepunkt gibt, der die Textgröße ignoriert. Align scheint dieses Problem nicht zu haben ... love u <3

— ValdaXD

8

                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

Dies brachte das beste Ergebnis für mich.

— Paul Kitatta
quelle

3

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 👨‍💻

— Ramesh RC
quelle

2

Platzieren Sie den Text in einer Mitte:

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );

— Minghang
quelle

2

Wenn Sie ein Intellij IDE-Benutzer sind, können Sie die Tastenkombination verwenden Alt+Enterund dann auswählen Wrap with Centerund dann hinzufügentextAlign: TextAlign.center

— Ray Coder
quelle

0

Übersicht: Ich habe das Flex-Widget verwendet, um Text auf meiner Seite mithilfe des MainAxisAlignment.center entlang der horizontalen Achse zu zentrieren. Ich verwende die Containerauffüllung, um einen Randbereich um meinen Text zu erstellen.

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])

— Goldener Löwe
quelle