web-dev-qa-db-ja.com

Flutterでテキストを垂直および水平に中央揃えするにはどうすればよいですか？

FlutterでTextウィジェットのコンテンツを垂直および水平に中央揃えする方法を知りたいのですが。 Center(child: Text("test"))を使用してウィジェット自体をセンタリングする方法のみを知っていますが、コンテンツ自体はデフォルトでは左揃えです。 Androidでは、これを実現するTextViewのプロパティはgravityと呼ばれます。

私が欲しいものの例：

centered text example

user-interfacetextwidgetalignmentflutter
28
jeroen-meijer

TextAlignコンストラクターのTextプロパティを使用できます。

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

テキスト配置センタープロパティの設定は水平方向の配置のみです。

enter image description here

以下のコードを使用して、テキストを垂直方向および水平方向の中央に設定しました。

enter image description here

コード：

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

より柔軟なオプションは、Text()をAlign()でラップすることだと思います。

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

Center()を使用すると、テキストウィジェットでTextAlignを完全に無視するようです。 TextAlign.leftまたはTextAlign.rightを揃えない場合、中央に残ります。

11
Mike

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

コーディングをお楽しみください???? ‍ ????

1
Ramesh R C