How to detect when a TextField is selected in Flutter?
I suppose you are looking for FocusNode
.
To listen to focus change, you can add a listner to the FocusNode
and specify the focusNode
to TextField
.
Example:
class TextFieldFocus extends StatefulWidget {
@override
_TextFieldFocusState createState() => _TextFieldFocusState();
}
class _TextFieldFocusState extends State<TextFieldFocus> {
FocusNode _focus = FocusNode();
TextEditingController _controller = TextEditingController();
@override
void initState() {
super.initState();
_focus.addListener(_onFocusChange);
}
@override
void dispose() {
super.dispose();
_focus.removeListener(_onFocusChange);
_focus.dispose();
}
void _onFocusChange() {
debugPrint("Focus: ${_focus.hasFocus.toString()}");
}
@override
Widget build(BuildContext context) {
return new Container(
color: Colors.white,
child: new TextField(
focusNode: _focus,
),
);
}
}
This gist represents how to ensure a focused node to be visible on the ui.
Hope it helps!
To be notified about a focus event, you can avoid manually managing widget's state, by using the utility classes FocusScope
, Focus
.
From the docs (https://api.flutter.dev/flutter/widgets/FocusNode-class.html):
Please see the Focus and FocusScope widgets, which are utility widgets that manage their own FocusNodes and FocusScopeNodes, respectively. If they aren't appropriate, FocusNodes can be managed directly.
Here is a simple example:
FocusScope(
child: Focus(
onFocusChange: (focus) => print("focus: $focus"),
child: TextField(
decoration: const InputDecoration(labelText: 'City'),
)
)
)
The easiest and simplest solution is to add the onTap method on TextField.
TextField(
onTap: () {
print('Editing stated $widget');
},
)
Simply use onTap
function of TextField
.
TextField(
onTap: () {
// Your code.
},
);
There is another way if your textfield needs to be disabled for some purpose like mine. for that case, you can wrap your textField with InkWell
like this,
InkWell(
onTap: () {
print('clicked');
},
child: TextField(
enabled: false,
),
);