Why is my GestureDetector onTap event not firing? - flutter

I've created a custom form field and in it is a GestureDetector but the onTap is not firing. I want to use the GestureDetector to collect the click event when someone clicks on the form field in a disabled state so I can launch a dialog box. Code is below. I'm wondering what I must be doing wrong or misunderstanding.
Widget _customFormField(
{required String title,
required String initialValue,
required int maxLines,
required int maxLength,
required bool enabled,
required TextEditingController controller,
bool autoFocus = false,
required FocusNode currentFocusNode,
required FocusNode futureFocusNode,
Function? function,
bool formEnd = false}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: const TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
fontFamily: 'Ariel',
color: Colors.pink)),
GestureDetector(
onTap: () {
print('onTap'); // <-------------------- This never gets hit
function;
},
child: TextFormField(
autofocus: autoFocus,
enabled: enabled,
textInputAction:
formEnd ? TextInputAction.done : TextInputAction.next,
onEditingComplete: () =>
FocusScope.of(context).requestFocus(futureFocusNode),
focusNode: currentFocusNode,
controller: controller,
keyboardType: TextInputType.text,
validator: (value) {
if (value!.isEmpty) {
if (_formValid) {
_formValid = false;
currentFocusNode.requestFocus();
}
//title.toLowerCase()
return 'Please enter the ${title.toLowerCase()}';
} else {
return null;
}
},
),
),
],
);
}
I've tried changing it to an InkWell but it behaves the same.
I've removed some styling code from the example but nothing that could have an affect on the problem.

well the function property that you got from the properties are the definition of the method, when you do :
onTap: () {
print('onTap');
function;
},
you not calling the method, you putting it there, you need to call it so it runs, by adding () or by calling call() on it.
onTap: () {
print('onTap');
function(); // like this
// function.call(); or like this
},

Try the following:
onTap: () {
print('onTap'); // <-------------------- This never gets hit
if (function != null) function.call();
}

Related

Validate a non-visible field in Flutter Form

I have a Flutter Form with many dropdownformfield and textformfield widgets, validating these is trivial using the validate: method. Validation for visual fields is obvious.
However, in many forms a non-visible element may need to be validated. For instance, if taking a picture in a Form, there will only be a button to take the picture which will input the resulting filename into a String var. I would need to validate the String var in this case and return the validation result to the button (i.e. display a "Required field" below the button), but of course the String var is not held in any formfield widget.
This being said, how can I either "wrap" the button in a widget which contains a validator: method, or how can I add a validator to the button itself AND then display the appropriate validation message to the user in the UI?
Thank you!
You could create your own FormField:
class TakePictureFormField extends FormField<String> {
/// Creates a [FormField] that contains an [ElevatedButton] to take a picture
/// with the phone camera.
///
/// The [String] value corresponds to the path of the picture taken.
TakePictureFormField({
Key? key,
String? initialValue,
FormFieldSetter<String>? onSaved,
FormFieldValidator<String>? validator,
bool enabled = true,
AutovalidateMode? autovalidateMode,
ButtonStyle? buttonStyle,
void Function(String)? onChanged,
}) : super(
key: key,
initialValue: initialValue,
onSaved: onSaved,
validator: validator,
enabled: enabled,
autovalidateMode: autovalidateMode,
builder: (FormFieldState<String> field) {
final currentValue = field.value;
return InputDecorator(
decoration: InputDecoration(
border: InputBorder.none,
errorText: field.errorText,
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(field.context).errorColor,
),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
style: buttonStyle,
onPressed: () async {
// Fake implementation to take a picture.
final value = await Future<String>.delayed(
const Duration(microseconds: 300),
() => 'my_path/to/image');
field.didChange(value);
if (onChanged != null) {
onChanged(value);
}
},
child: const Text('Take a Picture'),
),
if (currentValue != null) Text(currentValue),
],
),
);
},
);
}
And then use it inside a Form like you would for any other FormField widget:
TakePictureFormField(
validator: (val) =>
val == null || val.isEmpty ? 'Error invalid picture' : null,
)
Try the complete example on DartPad

onEditingComplete is not called after unfocus

I have a TextField like this. The additional code is necessary to show that in different situations, I do various focus manipulation.
final node = FocusScope.of(context);
Function cleanInput = () => {controller.text = controller.text.trim()};
Function onEditingComplete;
Function onSubmitted
TextInputAction textInputAction;
if (!isLast) {
onEditingComplete = () => {
cleanInput(),
node.nextFocus(),
};
onSubmitted = (_) => {cleanInput()};
textInputAction = TextInputAction.next;
} else {
onEditingComplete = () => {
cleanInput(),
};
onSubmitted = (_) => {
cleanInput(),
node.unfocus(),
};
textInputAction = TextInputAction.done;
}
Widget textInput = TextField(
textInputAction: textInputAction,
controller: controller,
onEditingComplete: onEditingComplete,
onSubmitted: onSubmitted,
keyboardType: textInputType,
));
As you can see, I have functions I want to run onEditingComplete. However, this only gets called when I press the Next or Done buttons on my keyboard (or the Enter key in an emulator). If I change focus by tapping on a different field, this function does not get called.
I have tried using a Focus or FocusNode to help with this, but when I do so, the onEditingComplete function itself no longer works.
How can I get the desired effect here while everything plays nicely together?
Focus widget
Wrapping fields in a Focus widget might do the trick.
The Focus widget will capture focus loss events for children. With its onFocusChange argument you can call arbitrary functions.
Meanwhile, the onEditingComplete argument of TextField is unaffected and will still be called on the software keyboard "Next/Done" keypress.
This should handle field focus loss for both "Next/Done" keypress and user tapping on another field.
import 'package:flutter/material.dart';
class TextFieldFocusPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// ↓ Add this wrapper
Focus(
child: TextField(
autofocus: true,
decoration: InputDecoration(
labelText: 'Name'
),
textInputAction: TextInputAction.next,
// ↓ Handle focus change on Next / Done soft keyboard keys
onEditingComplete: () {
print('Name editing complete');
FocusScope.of(context).nextFocus();
},
),
canRequestFocus: false,
// ↓ Focus widget handler e.g. user taps elsewhere
onFocusChange: (hasFocus) {
hasFocus ? print('Name GAINED focus') : print('Name LOST focus');
},
),
TextField(
decoration: InputDecoration(
labelText: 'Password'
),
),
],
),
),
),
);
}
}
Please add a focus node to your textfield and add a listener to your focus node to trigger when it unfocuses
final node = FocusScope.of(context);
node.addListener(_handleFocusChange);
void _handleFocusChange() {
if (node.hasFocus != _focused) {
setState(() {
_focused = node.hasFocus;
});
}
}
Widget textInput = TextField(
//you missed this line of code
focusNode: node,
textInputAction: textInputAction,
controller: controller,
onEditingComplete: onEditingComplete,
onSubmitted: onSubmitted,
keyboardType: textInputType,
));
And also you can validete automatically by adding autoValidate to your code like below:
Widget textInput = TextField(
//add this line of code to auto validate
autoValidate: true,
textInputAction: textInputAction,
controller: controller,
onEditingComplete: onEditingComplete,
onSubmitted: onSubmitted,
keyboardType: textInputType,
));
FocusNode _node;
bool _focused = false;
#override
void initState() {
super.initState();
_node.addListener(_handleFocusChange);
}
void _handleFocusChange() {
if (_node.hasFocus != _focused) {
setState(() {
_focused = _node.hasFocus;
});
}
}
#override
void dispose() {
_node.removeListener(_handleFocusChange);
_node.dispose();
super.dispose();
}
TextFormField(
focusNode: _node)

Flutter TextField calls onSubmitted unexpectedly

My case is I have a widget with TextField used for search. When I type something in TextField the cross icon become visible in suffixIcon (to clear). I do not do search and just click the cross icon to clear the entered input but onSubmitted is called and search executed!!! But I don't need it! I do not submit the text input, I cancel it!!
final searchClear = ValueNotifier(false);
final searchController = TextEditingController();
// in initState method:
searchController.addListener(() {
searchClear.value = searchController.text.isNotEmpty;
});
// in build method:
TextField(
...
controller: searchController,
suffixIcon: ValueListenableBuilder<bool>(
valueListenable: searchClear,
builder: (_,visible,child) {
return Visibility(
visible: visible,
child:child,
);
},
child: InkWell(
child: Icon(Icons.close),
onTap: () {
searchController.clear();
searchFocus.unfocus();
}
),
),
onSubmitted: (value) {
if(value.isEmpty) {
FocusScope.of(context).requestFocus(searchFocus);
} else {
widget.search(value);
}
}
),
P.S. Any ideas to work around this?

Flutter enabled and focus textformfield

I create a profile page and i have 4 textformfield. I want to on tap icon activate textformfield and focus at the same time. Now I need tap twice on icon and first activated field, secondly focused.
How to solve it?
My code:
class UserProfile extends StatefulWidget {
#override
_UserProfileState createState() => _UserProfileState();
}
class _UserProfileState extends State<UserProfile> {
FocusNode myFocusNode;
bool isEnable = false;
#override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
#override
void dispose() {
myFocusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.fromLTRB(40.0, 50.0, 20.0, 0.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Flexible(
child: TextFormField(
enabled: isEnable,
focusNode: myFocusNode,
),
),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() {
isEnable = true;
FocusScope.of(context).requestFocus(myFocusNode);
});
})
],
),
You should use autofocus: isEnable instead.
just do like below in your ontap
setState(() {
if(isEnable)
Future.delayed(const Duration(milliseconds: 10), ()
{FocusScope.of(context).requestFocus(myFocusNode);
});
isEnable = true;
});
in first time isEnable is false so focusing not call and just enabling work and in other times get focus too.
you can't focus widget until disabled and when you enabling widget. when you do focusing and enabling at same time in ui tread it's try focusing before enabling because of their rendering time.if you post some delay to focusing the problem get solving.
Try using readOnly instead of enabled in TextFormField
I faced similar issue when I had multiple TextFields to enable kinda PIN input. And some of that had to be dynamically enabled and disabled plus prevent users from entering value in the next field while they haven't finished the previous one. I've tried a lot of approaches and focusing field after some delay was not a way to go because I wanted the keyboard to always be available while entering. So I've took a crazy path and solved this next way:
onTap: () => _focusNodes[_currentLetterIndex].requestFocus()
where _focusNodes are for each letter and _currentLetterIndex is calculated programmatically during input (when finished letter 0 -> current becomes 1 and so on). As the result when user tried to tap on next field - it was automatically refocused to the current one which behaves like the next field is disabled.
An example of the full text field looks like this (don't pay attention to decorations etc.)
TextField(
key: ValueKey(index),
controller: _editingControllers[index],
onTap: () => _focusNodes[_currentLetterIndex].requestFocus(),
focusNode: _focusNodes[index],
textAlign: TextAlign.center,
showCursor: false,
maxLength: 2,
enableInteractiveSelection: false,
autocorrect: false,
enableSuggestions: false,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
height: 1.2,
decoration: TextDecoration.none),
decoration: InputDecoration(
fillColor: !_wordCompleted &&
!correct &&
_editingControllers[index].text.isNotEmpty
? const Color(0xFFFFEEF0)
: Colors.white,
filled: !correct,
counterText: "",
border: defaultInputBorder,
focusedBorder: !correct &&
!_wordCompleted &&
_editingControllers[index].text.isNotEmpty
? incorrectInputBorder
: focusedInputBorder,
enabledBorder: _wordCompleted
? focusedInputBorder
: correct
? correctInputBorder
: defaultInputBorder,
errorBorder: defaultInputBorder,
disabledBorder: _wordCompleted
? focusedInputBorder
: correct
? correctInputBorder
: defaultInputBorder,
contentPadding: const EdgeInsets.only(left: 2)),
),

TextFormField enters value backwards [Flutter]

As displayed in the GIF below, the TextFormField i am using is entering the values backwards. I have set the TextDirection property to ltr as well but it did not change anything. Other TextFormFields dont seem to be having this issue. The entered text is being sent back to another screen using Navigator.pop and it is sent in the same backwards manned.
Weird TextFormField
Code for the textFormField causing the issue:
TextFormField(
// validator: (String value) {
// return value.isEmpty ? "task must have a name" : null;
// },
textDirection: TextDirection.ltr,
maxLength: 100,
controller: newcontroller, // Just an ordinary TextController
onChanged: (value) {
setState(() {
newcontroller.text = value;
});
},
decoration: InputDecoration(
errorText: _validate // Just a boolean value set to false by default
? 'Value Can\'t Be Empty' : null,
labelText: "name of task"
),
style: TextStyle(height: 1.2, fontSize: 20, color: Colors.black87)
)
You don't have to set text in newcontroller.text when onChanged is called.
text enter in your TextFormField is assigned by default to newcontroller.
You are getting this error because for this piece of code,
So, try to remove below code
setState(() {
newcontroller.text = value;
});
you can send whatever you want in Navigator.pop(context,whtever you want to pass)
TextFormField(
// validator: (String value) {
// return value.isEmpty ? "task must have a name" : null;
// },
textAlign: TextAlign.end,
maxLength: 100,
controller: newcontroller, // Just an ordinary TextController
onChanged: (value) {
print(value);
},
decoration: InputDecoration(
errorText:
_validate // Just a boolean value set to false by default
? 'Value Can\'t Be Empty'
: null,
labelText: "name of task"),
style:
TextStyle(height: 1.2, fontSize: 20, color: Colors.black87),
),
MaterialButton(
onPressed: () {
Navigator.pop(context, newcontroller.text);
},
child: Text("GO BACK!"),
),
replace onChanged with onEditingComplete.
onEditingComplete: (value) {
newController.text = value;
FocusScope.of(context).unfocus(); //use this to dismiss the screen keyboard
}
Just remove the onChanged function. There is no need for it.
onChanged: (val) {
if (val.isNotEmpty) {
setState(() {
// remember to not add your controller value in onchanged
_messageController.text = val;
isShowSendButton = true;
});
} else {
setState(() {
// remember to not add your controller value in onchanged
_messageController.text = val;
isShowSendButton = false;
});
}
Unfortunately, onEditingComplete doesn't always fire (i.e. on a focus change), so if you are editing a text variable you can still use onChanged as the most reliable way to update changes, but you should not use the onChanged value parameter, nor should you use setState (which results in the reversed text).
TextEditingController tec = TextEditingController(text: myText);
return TextField(
controller: tec,
onChanged: (value) {
myText = tec.text;
},
);