web-dev-qa-db-ja.com

（Flutter）TextFormFieldフォーカスのlabelColorを変更

焦点を合わせたときにlabelTextの色を変更しようとしています。テキストの色は変更できますが、フォーカスしているときは変更できません。

ヒントのテキストの色とラベルのテキストの色をすべて試しましたが、役に立ちません。

Container(
  padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
  child: TextFormField(
    cursorColor: Colors.lightGreen,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      labelText: 'Phone Number',
      hintText: 'Enter a Phone Number',
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.lightGreen
        )
      ),
      border: OutlineInputBorder(
        borderSide: BorderSide()
      ),
    )
  ),
),

これが何が起こっているかの画像です：

enter image description here

enter image description here

flutterdartform-fields
5
Bnd10706

概要

Flutterクックブックのフォーカスとテキストフィールド レシピを確認してください。

基本的に、次のことを行う必要があります。

  1. FocusNodeプロパティを作成します。
  2. 初期化と破棄を追加します。
  3. TextFormFieldに追加します。
  4. TextFormFieldをタップするたびにフォーカスリクエストを追加します。

1. FocusNodeプロパティを作成します

class CustomTextFormFieldState extends State<AuthTextFormField> {
  FocusNode _focusNode;
  ...

2.初期化と廃棄を追加します

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

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

3. TextFormFieldに追加します

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    ...

4. TextFormFieldをタップするたびにフォーカスリクエストを追加します

setStateを使用することを忘れないでください：

void _requestFocus(){
  setState(() {
    FocusScope.of(context).requestFocus(_focusNode);
  });
}

メソッドをTextFormFieldのonTapプロパティに追加します。

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    onTap: _requestFocus,
    ...
0
Philippe Fanaro