Add 'onFocusChange' Property to TextFormField Widget

[YuneshShrestha]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Use case

1. Validation: Developers can use 'onFocusChange' to trigger input validation when a user leaves the field, providing immediate feedback on the entered data.
2. User Experience: It enables custom behaviors, like scrolling the view to keep the focused field visible when the keyboard appears.
3. Accessibility: For making apps more accessible, it's necessary to handle focus changes to notify screen readers or provide auditory feedback.

Proposal

Change the color of the eye icon in a password field when the user leaves the TextFormField to provide visual feedback on focus changes.

TextFormField(
      obscureText: _isObscure && widget.isPassword,
      decoration: InputDecoration(
        border: const UnderlineInputBorder(
          borderSide: BorderSide(color: grey),
        ),
        focusedBorder: const UnderlineInputBorder(
          borderSide: BorderSide(color: primaryColor),
        ),
        labelText: widget.hintText,
        labelStyle: Theme.of(context).textTheme.labelSmall!.copyWith(
              color: Colors.black,
            ),
        suffixIcon: widget.isPassword
            ? IconButton(
                icon: Icon(
                  _isObscure ? Icons.visibility : Icons.visibility_off,
                  color: _isFocused ? primaryColor : Colors.grey,
                ),
                onPressed: _toggleObscure,
              )
            : null,
      ),
      style: TextStyle(color: Colors.black),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter a value';
        }
        return null;
      },
      onSaved: (value) {
        // Do something with the value
      },
    // _handleFocus handle change of eye color
      onFocusChange: _handleFocus, 
    );

Android.Emulator.-.Pixel_3a_API_34_extension_level_7_x86_64_5554.2023-10-21.20-57-25.mp4

[navaronbracke]

You should use a FocusNode for that. See https://api.flutter.dev/flutter/widgets/FocusNode-class.html which has a sample on how to handle focus changes.

[darshankawar]

@YuneshShrestha
Check above solution and see if it helps to resolve your use case or not.

[YuneshShrestha]

You should use a FocusNode for that. See https://api.flutter.dev/flutter/widgets/FocusNode-class.html which has a sample on how to handle focus changes.

Thanks for the solution. It helped me. Here is how I did it:

1. Defining and listening to focus node event.

FocusNode nameFocusNode = FocusNode();
  FocusNode passwordFocusNode = FocusNode();
  Color color = Colors.grey;
  @override
  void initState() {
    super.initState();
    nameFocusNode.addListener(() {
      setState(() {
        color = Colors.green;
      });
    });
    passwordFocusNode.addListener(() {
      setState(() {
        color = Colors.blue;
      });
    });
  }

2. Displaying it

Column(
        children: [
          TextFormField(
            focusNode: nameFocusNode,
            onFieldSubmitted: (value) {
              nameFocusNode.unfocus();
              FocusScope.of(context).requestFocus(passwordFocusNode);
            },
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
                labelText: 'Password',
                suffixIcon: const Icon(Icons.remove_red_eye),
                suffixIconColor: color),
            focusNode: passwordFocusNode,
            onFieldSubmitted: (value) {
              passwordFocusNode.unfocus();
            },
          ),
        ],
      ),
    
    

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.