[Flutter]Text(テキスト)を横幅いっぱい(full width)にするには？

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

Textのサイズを横幅いっぱいにする方法を紹介します。

方法
使用例

方法

Textのサイズを横幅いっぱいにするには、SizedBoxとFittedBoxを使います。

まず、TextをFittedBoxでラップし、FittedBoxの引数「fit」にBoxFit.fitWidthを指定します。

そして、FittedBoxをSizedBoxでラップし、SizedBoxの引数「width」にdouble.infinityを指定します。

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

SizedBoxとFittedBoxを使うことで、Textを横幅いっぱいにすることが出来ます。

使用例

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