Как центрировать текст по вертикали и горизонтали во Флаттере?

Я хотел бы знать, как центрировать содержимое текстового виджета по вертикали и горизонтали в Flutter. Я знаю только, как центрировать сам виджет, используя Center(child: Text("test")) но не сам контент, он по умолчанию выровнен по левому краю. Я считаю, что в Android свойство TextView, которое достигает этого, называется gravity.

Пример того, что я хочу:

Ответ 1

Свойство центра выравнивания текста устанавливает только горизонтальное выравнивание.

Я использовал код ниже, чтобы установить текст вертикально и горизонтально по центру.

Код:

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

Ответ 2

Вы можете использовать свойство TextAlign конструктора Text.

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

Ответ 3

Я думаю, что более гибким вариантом было бы обернуть Text() с помощью Align() следующим образом:

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

Использование Center(), похоже, полностью игнорирует TextAlign в виджете "Текст". Он не будет выравнивать TextAlign.left или TextAlign.right, если вы попытаетесь, он останется в центре.

Ответ 4

Текстовый элемент внутри Центра SizedBox работает намного лучше, ниже Пример кода

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

Наслаждайся кодированием 👨‍💻

Ответ 5

Поместите текст в центр:

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