[Flutter]TextFormFieldの入力中(focus)の背景色(backgroundcolor)を変える(change)には？

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

TextFormFieldの入力中の背景色を変える方法を紹介します。

方法
使用例

方法

TextFormFieldの入力中の背景色を変えるには、FocusNodeを使います。

まず、入力中かを判断する変数とFocusNodeの変数を用意します。

そして、initStateでFocusNodeをインスタンス化し、インスタンスのaddListnerで入力中かどうかを切り替える処理を指定します。

また、disposeでインスタンスの破棄をします。

  FocusNode? _focusNode; 
  var _isFocus = false; //入力中かどうか

  @override
  void initState() {
    _focusNode = FocusNode()
      ..addListener(() {
        setState(() {
          _isFocus = !_isFocus;
        });
      });

    super.initState();
  }

  @override
  void dispose() {
    _focusNode?.dispose();
    super.dispose();
  }

次に、TextFormFieldの引数「focusNode」に変数を指定します。

最後に、InputDecorationの引数「filled」にtrueを指定し、引数「fillColor」では三項演算子で入力中の背景色が切り替わるようにします。

TextFormField(
  focusNode: _focusNode,
  decoration: InputDecoration(
    fillColor: _isFocus ? /*入力中の背景色*/: /*通常時の背景色*/,
    filled: true,
  ),
),

これでTextFormFieldの入力中の背景色が変わるようになります。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final _formKey = GlobalKey<FormState>();
  FocusNode? _focusNode;
  var _isFocus = false;

  @override
  void initState() {
    _focusNode = FocusNode()
      ..addListener(() {
        setState(() {
          _isFocus = !_isFocus;
        });
      });

    super.initState();
  }

  @override
  void dispose() {
    _focusNode?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              focusNode: _focusNode,
              decoration: InputDecoration(
                fillColor: _isFocus ? Colors.orange[100] : Colors.blue[100],
                filled: true,
                border: OutlineInputBorder(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}