[Flutter]Text(テキスト)の横幅(width)を設定するには？

どうも、ちょげ(@chogetarou)です。

Textの横幅を設定する方法を紹介します。

方法
使用例

方法

Textの横幅を設定するには、SizedBoxもしくはContainerを使います。

まず、TextをSizedBoxもしくはContainerでラップします。

そして、SizedBoxもしくはContainerの引数「width」に横幅を指定します。

SizedBox( //Containerでも同じ
  width: 横幅,
  child: Text("テキスト"),
),

SizedBoxもしくはContainerを使うことで、Textの横幅を設定することが出来ます。

Textのフォントサイズは、横幅を設定しても変わりません。

もし、横幅の設定に合わせて、Textのフォントサイズを変えたい場合は、FittedBoxを使います。

SizedBox(
  width: 横幅,
  child: FittedBox(
    fit: BoxFit.fitWidth,
    child: Text("テキスト"),
  ),
),

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Text("Hello, Flutter"),
          ),
        ),
      ),
    );
  }