[Flutter]ElevatedButtonのテキストサイズ(text size)を設定するには？

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

ElevatedButtonのテキストサイズを設定する方法を紹介します。

方法
1. style
2. Textのstyle
まとめ

方法

ElevatedButtonのテキストサイズを設定する方法は、２つあります。

style

１つは、ElevatedButtonの引数「style」を使う方法です。

まず、ElevatedButtonの引数「style」にElevatedButton.styleFrom()もしくはButtonStyleを指定します。

そして、ElevatedButton.styleFrom()もしくはButtonStyleでテキストのフォントサイズを設定します。

styleFromバージョン

//styleFromバージョン
ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    textStyle: TextStyle(
      fontSize: 24, //テキストのサイズ
    ),
  ),
),

ButtonStyleバージョン

//ButtonStyleバージョン
ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ButtonStyle(
    textStyle: MaterialStateProperty.resolveWith(
      (states) => TextStyle(
          fontSize: 24, //テキストのサイズ
      ),
    ),
  ),
),

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            child: Text('Button'),
            style: ElevatedButton.styleFrom(
              textStyle: TextStyle(
                fontSize: 24, //フォントサイズ
              ),
            ),
          ),
        ),
      ),
    );

Textのstyle

もう１つは、Textの引数「style」を使う方法です。

まず、Textの引数「style」にTextStyleを指定します。

そして、TextStyleの引数「fontSize」にフォントサイズを指定します。

ElevatedButton(
  onPressed: () {},
  child: Text(
    'Button',
    style: TextStyle(
      fontSize: size, //テキストサイズ
    ),
  ),
),

TextStyleの引数「fontSize」に指定した値が、テキストのサイズになります。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            child: Text(
              'Button',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }