[Flutter]TextFormFieldの無効時(disable)のラベル(label)の色(color)を変える(change)には？

[Flutter]TextFormFieldの無効時のラベルの色を変えるには？

Flutter

2021.12.14

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

TextFormFieldの無効時のラベルの色を変える方法を紹介します。

方法
使用例

方法

TextFormFieldの無効時のラベルの色を変えるには、三項演算子を使います。

具体的には、TextFormFieldが無効かどうかを切り替えている変数を使って、無効と有効でラベルの色が切り替わるようにします。

TextFormField(
  enabled: isEnabled,
  decoration: InputDecoration(
    labelStyle: TextStyle(
      color: isEnabled ? /*有効時の色*/ : /*無効時の色*/,
    ),
    labelText : 'ラベル',
  ),
),

三項演算子を使えば、TextFormFieldの無効時のラベルの色を変えることが出来ます。

使用例

以下は、使用例です。

  var isEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                enabled: isEnabled,
                decoration: InputDecoration(
                  labelStyle: TextStyle(
                    color: isEnabled ? Colors.blue : Colors.blueGrey,
                  ),
                  labelText: 'label',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }