Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to detect focus on widgets? #308

Open
SimonLab opened this issue Feb 14, 2023 · 2 comments
Open

How to detect focus on widgets? #308

SimonLab opened this issue Feb 14, 2023 · 2 comments
Assignees
Labels
flutter Flutter related issues T2h Time Estimate 2 Hours

Comments

@SimonLab
Copy link
Member

SimonLab commented Feb 14, 2023

At the moment to extend the TextField to take all the screen see #303 I'm using the onTap property of the widget:

          child: TextField(
            onTap: () {
              extendsFieldText();
            },

This is not ideal (tab, autofocus are two example that put focus on textfield and which aren't using onTap) and it's preferable to detect the focus on the text field instead.
Looking at learning/implementing this now.
see

@SimonLab SimonLab added T1h Time Estimate 1 Hour flutter Flutter related issues labels Feb 14, 2023
@SimonLab SimonLab self-assigned this Feb 14, 2023
@SimonLab SimonLab moved this to 🔖 Ready for Development in dwyl app kanban Feb 14, 2023
@SimonLab SimonLab added the in-progress An issue or pull request that is being worked on by the assigned person label Feb 14, 2023
@SimonLab SimonLab moved this from 🔖 Ready for Development to 🏗 In progress in dwyl app kanban Feb 14, 2023
@SimonLab
Copy link
Member Author

Reading the TextField documentation I can see the focusNode property can be defined in the class constructor:

image

I don't know what is the keyboard focus for widget so reading the documentation find for this:
https://docs.flutter.dev/development/ui/advanced/focus

However I don't think this is directly related on how to detect focus on a widget.

@SimonLab
Copy link
Member Author

SimonLab commented Feb 14, 2023

After some reading it seems that we can use the Focus widget as a wrapper for the TextField:

          Focus(
            onFocusChange: (focus) {
              if (focus) {
                extendsFieldText();
              } else {
                minimizeFieldText();
              }
            },
            child: TextField(
              // onTap: () {
              //   extendsFieldText();
              // },
              decoration: const InputDecoration(
                  hintText: 'Capture what is on your mind..!.',
                  border: OutlineInputBorder()),
              expands: _expands,
              maxLines: _maxLines,
              textAlignVertical: TextAlignVertical.top,
              keyboardType: TextInputType.multiline,
            ),
          ),

The onFocusChange takes a callback where the function parameter (focus in our case) is a boolean representing if the wrapped element has the focus or not.

I'm still not sure if this is the "correct" way to detect focus, there is a lot of documentation that I haven't finished to read and there might be an edge case that I'm not aware of by using Focus or a better widget to do this.

SimonLab added a commit that referenced this issue Feb 14, 2023
Wrap TextField widget in a Focus widget to be able to use the
onFocusChange callback.

see #308
@SimonLab SimonLab added T2h Time Estimate 2 Hours and removed T1h Time Estimate 1 Hour in-progress An issue or pull request that is being worked on by the assigned person labels Feb 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
flutter Flutter related issues T2h Time Estimate 2 Hours
Projects
Status: 🏗 In progress
Development

No branches or pull requests

1 participant