Як центрувати текст вертикально та горизонтально у Flutter?

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

Приклад того, що я хочу:

Властивість центру вирівнювання тексту встановлює лише горизонтальне вирівнювання.

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

Код:

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

Ви можете використовувати TextAlignвластивість Textконструктора.

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

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

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

Center()Здається, використання TextAlignповністю ігнорує віджет Text. Він не буде вирівнюватися, TextAlign.leftабо TextAlign.rightякщо ви спробуєте, він залишиться в центрі.

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

Це дало найкращий результат для мене.

Елемент тексту всередині Центру 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
);
}

Насолоджуйтесь кодуванням 👨‍💻

Розмістіть текст у центрі:

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

Якщо ви користувач Intellij IDE, ви можете скористатися комбінацією клавіш, Alt+Enterа потім вибрати, Wrap with Centerа потім додатиtextAlign: TextAlign.center

Огляд: Я використовував віджет Flex для центрування тексту на моїй сторінці за допомогою MainAxisAlignment.center вздовж горизонтальної осі. Я використовую заповнення контейнера, щоб створити простір полів навколо мого тексту.

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

можливо, ви хочете надати однакову ширину та висоту для 2 контейнерів

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),