I am trying to catch the tap event on TextFormField into a flutter Form.
I use a GestureDetector to do that with the TextFormField as child but nothing is firing when a click on it :
#override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(title: const Text('Recherche de sorties')),
body: new DropdownButtonHideUnderline(
child: new Form(
key: _formKey,
autovalidate: _autovalidate,
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
new DatePicker(
labelText: 'Date',
selectedDate: widget.request.dateDebut,
initialDate: widget.request.dateDebut,
firstDate: new DateTime.now().add(new Duration(days: -1)),
lastDate: new DateTime.now().add(new Duration(days: 365 * 4)),
selectDate: (DateTime value) {
setState(() {
widget.request.dateDebut = value;
});
},
datePickerMode: DatePickerMode.day,
icon: const Icon(Icons.date_range),
),
new InputDecorator(
decoration: const InputDecoration(
labelText: 'Rayon',
hintText: '-- Choisissez un rayon --',
icon: const Icon(Icons.settings_backup_restore),
),
isEmpty: widget.request.rayon == null,
child: new DropdownButton<String>(
value: widget.request.rayon.toString(),
isDense: true,
onChanged: (String newValue) {
setState(() {
widget.request.rayon = int.parse(newValue);
});
},
items: _rayons.keys.map((int key) {
return new DropdownMenuItem<String>(
value: key.toString(),
child: new Text(_rayons[key]),
);
}).toList(),
),
),
new GestureDetector(
onTap: () async {
print("Container clicked");
Prediction p = await showGooglePlacesAutocomplete(
context: context,
apiKey: Consts.googlePlacesApiKey,
mode: Mode.fullscreen,
language: "fr",
components: [new Component(Component.country, "fr")]);
if (p != null) {
(_scaffoldKey.currentState).showSnackBar(
new SnackBar(content: new Text(p.description)));
}
},
child: new TextFormField(
// controller: controller,
decoration: const InputDecoration(
icon: const Icon(Icons.room),
hintText: 'Où êtes vous ?',
labelText: 'Localisation',
),
),
),
new Container(
padding: const EdgeInsets.all(20.0),
alignment: Alignment.center,
child: new Align(
alignment: const Alignment(0.0, -0.2),
child: new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
child: const Text('ANNULER'),
onPressed: _fermerCritereRecherche,
),
new RaisedButton(
child: const Text('VALIDER'),
onPressed: _valider,
),
],
),
)),
]),
),
),
);
}
If i replace :
new GestureDetector(
onTap: () async {
print("Container clicked");
Prediction p = await showGooglePlacesAutocomplete(
context: context,
apiKey: Consts.googlePlacesApiKey,
mode: Mode.fullscreen,
language: "fr",
components: [new Component(Component.country, "fr")]);
if (p != null) {
(_scaffoldKey.currentState).showSnackBar(
new SnackBar(content: new Text(p.description)));
}
},
child: new TextFormField(
// controller: controller,
decoration: const InputDecoration(
icon: const Icon(Icons.room),
hintText: 'Où êtes vous ?',
labelText: 'Localisation',
),
),
),
By a simple Container it is working :
new GestureDetector(
onTap: () async {
print("Container clicked");
Prediction p = await showGooglePlacesAutocomplete(
context: context,
apiKey: Consts.googlePlacesApiKey,
mode: Mode.fullscreen,
language: "fr",
components: [new Component(Component.country, "fr")]);
if (p != null) {
(_scaffoldKey.currentState).showSnackBar(
new SnackBar(content: new Text(p.description)));
}
},
child: new Container(
width: 80.0,
height: 80.0,
margin: new EdgeInsets.all(10.0),
color: Colors.black),
),
Do you have any ideas how to make GestureDetector work with TextFormField ? Maybe with a controller but i have tried without any success
Thanks in advance
Simply use onTap Method of TextFormField:
TextFormField(
onTap: () {
print("I'm here!!!");
}
)
Wrap TextFormField widget With AbsorbPointer widget , then OnTap() works definitely
here is an example:-
GestureDetector(
onTap: () => dialog(),
child: AbsorbPointer(
child: TextFormField(
textInputAction: TextInputAction.newline,
decoration: new InputDecoration(
fillColor: Colors.grey,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(6.0)),
borderSide:
BorderSide(color: Colors.grey[100]),
gapPadding: 4),
labelText: "Enter your mood",
labelStyle: TextStyle(
letterSpacing: 1,
color: Colors.grey,
fontSize: 13),
hintMaxLines: 1),
validator: (val) {
if (val == "") return "Field can't be empty";
},
keyboardType: TextInputType.text,
enabled: true,
textAlign: TextAlign.justify,
minLines: 3,
autofocus: false,
style: new TextStyle(
fontSize: 16.0,
color: Colors.black,
),
maxLines: 10,
),
),
),
Wrap AbsorbPointer Widget with Gesture Detector, and then work in onTap(). it will work fine.
I have found a solution by using the InputDecorator (from the flutter gallery) :
child: new InputDecorator(
decoration: const InputDecoration(
labelText: 'Localisation',
icon: const Icon(Icons.room),
),
child: widget.request.localisationLibelle != null
? new Text(widget.request.localisationLibelle)
: new Text("-- Choisissez un lieu --"),
),
Instead of using a TextFormField that catch the tap at the place of the GestureDetector I use a simple child Text of the InputDecorator widget.
I just solved this myself using Flutter 0.6.0.
The GestureDetector object takes in a behavior property from this enum to determine how to defer actions.
Small snippet of the GestureDetector taking priority over a TextFormField:
new GestureDetector(
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: new TextFormField(
enabled: onTap == null,
*other stuff here*
),
)
The onTap object is a Function object I declare outside of this. I also set the enabled property based on my onTap object, so I can ensure that if I want to capture a tap, the text form field is disabled.
onTap function is working but if you use it with InputDecoration { enabled: false }, it will not working.
decoration: InputDecoration(
enabled: false, // not working when on tap
isDense: true,
filled: true,
fillColor: _listRadioItemPosition.isEmpty ? Colors.grey[100] : Colors.white,
border: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xFFC4C4C4), width: 1)),
),
onTap: (){
displayBottomSheetPosition(context);
},
Related
I want to ask why my ontap not working on my code , I'm creating separate function and I wanted to call it inside my textformfield which is in another separate function, I'm new and still learning , please help me.
this is my code
_showTaskCategoriesDial({required Size size}) {
showDialog(
context: context,
builder: (ctx) {
return AlertDialog(
backgroundColor: Colors.black54,
title: Text(
'Job Category',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
content: Container(
width: size.width * 0.9,
child: ListView.builder(
shrinkWrap: true,
itemCount: Persistent.jobCategoryList.length,
itemBuilder: (ctx, index) {
return InkWell(
onTap: () {
setState(() {
_jobCategoryController.text =
Persistent.jobCategoryList[index];
});
Navigator.pop(context);
},
child: Row(
children: [
const Icon(
Icons.arrow_right_alt_outlined,
color: Colors.grey,
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
Persistent.jobCategoryList[index],
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
)
],
),
);
},
),
),
);
});
}
and then I call it in my textFormFields like so and I don't know why it doesn't work
_textFormFields(
valueKey: 'JobCategory',
controller: _jobCategoryController,
enabled: false,
fct: () {
_showTaskCategoriesDial(size: size);
},
this is my textFormFields class
Widget _textFormFields(
{required String valueKey,
required TextEditingController controller,
required bool enabled,
required Function fct,
required int maxlength}) {
return Padding(
padding: EdgeInsets.all(5.0),
child: InkWell(
onTap: () {
fct;
},
child: TextFormField(
validator: (value) {
if (value!.isEmpty) {
return 'Value is missing';
}
return null;
},
controller: controller,
enabled: enabled,
key: ValueKey(valueKey),
style: TextStyle(
color: Colors.white,
),
maxLines: valueKey == 'JobDescription' ? 3 : 1,
maxLength: maxlength,
keyboardType: TextInputType.text,
decoration: InputDecoration(
filled: true,
fillColor: Colors.black54,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red))),
),
),
);
}
Change this:
Widget _textFormFields(
{required String valueKey,
required TextEditingController controller,
required bool enabled,
required Function fct,
required int maxlength}) {
return Padding(
padding: EdgeInsets.all(5.0),
child: InkWell(
onTap: () {
fct;
},
child: TextFormField(
...
),
...
)
to:
Widget _textFormFields(
{required String valueKey,
required TextEditingController controller,
required bool enabled,
required Function()? fct, // <---- change this
required int maxlength}) {
return Padding(
padding: EdgeInsets.all(5.0),
child: InkWell(
onTap: fct, // <---- change this
child: TextFormField(
...
),
...
)
or :
InkWell(
onTap: (){
fct(); // <---- change this
},
child: TextFormField(
...
),
)
Hi I have created a default form field, in a separate dart file called components, and I have login_screen.dart also.
there are many errors I don't know how to fix it, and make the code work, I will put down the code of the component.dart code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Widget defaultButton(
{double width = double.infinity,
Color background = Colors.blue,
double radius = 10.0,
required Function function,
required String text,
bool isUpperCase = true}) =>
Container(
height: 40.0,
width: width,
child: MaterialButton(
onLongPress: () {},
onPressed: function(),
child: Text(
isUpperCase ? text.toUpperCase() : text.toLowerCase(),
style: TextStyle(color: Colors.white),
)),
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(radius),
color: background,
),
);
Widget defaultFormFeild({
required TextEditingController controller,
required TextInputType type,
Function onSubmit,
Function onChange,
required Function validate,
required var label,
required IconData prefix,
}) =>
TextFormField(
controller: controller,
keyboardType: type,
onFieldSubmitted: onSubmit(),
onChanged: onChange(),
validator: validate(),
decoration: InputDecoration(
labelText: label,
prefixIcon: Icon(prefix),
border: OutlineInputBorder()
),
);
and here is the code of the login_screen.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:udemy_flutter/shared/components/components.dart';
class LoginScreen extends StatelessWidget {
var emailController = TextEditingController();
var passController = TextEditingController();
var formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: SingleChildScrollView(
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Login',
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold
),
),
const SizedBox(
height: 40.0,
),
defaultFormFeild(
controller: emailController,
label: 'Email',
prefix: Icons.email,
type: TextInputType.emailAddress,
validate: (String value){
if(value.isEmpty != null){
return 'Email Cannot Be Empty';
}
return null;
}
),
const SizedBox(
height: 15.0,
),
TextFormField(
controller: passController,
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
prefixIcon: Icon(
Icons.lock
),
suffixIcon: Icon(
Icons.remove_red_eye,
)
),
onChanged: (value) {
print(value);
},
onFieldSubmitted: (value) {
print(value);
},
validator: (value) {
if(value!.isEmpty){
return 'Password cannot be empty';
}
return null;
},
),
const SizedBox(
height: 10.0,
),
defaultButton(
function: (){
print(emailController.text);
print(passController.text);
},
text: 'Login',
),
const SizedBox(
height: 10.0,
),
defaultButton(
text: 'ReGister',
function: () {
print('You have just clicked on register');
},
background: Colors.red,
isUpperCase: false
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Don\'t you have an account?'),
TextButton(onPressed: () {}, child: const Text(
'Register Now'
))
],
)
],
),
),
),
),
),
);
}
}
Idk if all the problems came from a null-safety feature in a flutter because I'm new in this technology.
Why
The reason this happens is because with null safety enabled, your functions onSubmit and onChange can't be null.
Solution
I would do it this way:
Widget defaultFormFeild({
required TextEditingController controller,
required TextInputType type,
Function? onSubmit, //Add question mark
Function? onChange, //Add question mark
required Function validate,
required var label,
required IconData prefix,
}) =>
TextFormField(
controller: controller,
keyboardType: type,
onFieldSubmitted: onSubmit != null? onSubmit() : null, //do null checking
onChanged: onChange != null? onChange() : null, //do null checking
validator: validate(),
decoration: InputDecoration(
labelText: label,
prefixIcon: Icon(prefix),
border: OutlineInputBorder()
),
);
I added a float button in my application while clicking on it two text-field appear , without adding formKey the button works but when i use it to controle if the field text are empty or not by if statement if (formKey.currentState!.validate()) in the Debug Console i get this error
════════ Exception caught by gesture ═══════════════════════════════════════════
Unexpected null value.
═══════════════════════════════════════════════════════════════════════════════
this the code of floating button
floatingActionButton: FloatingActionButton(
onPressed: () {
if (isBottomSheetShown) {
if (formKey.currentState!.validate()) {
Navigator.pop(context);
isBottomSheetShown = false;
setState(() {
fabIcon = Icons.edit;
});
}
} else {
scaffoldKey.currentState!.showBottomSheet(
(context) => Container(
color: Colors.grey[100],
padding: const EdgeInsets.all(20),
child: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: titleController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.title),
hintText: 'write a title',
labelText: 'Title',
border: OutlineInputBorder(),
),
),
SizedBox(
height: 15,
),
TextField(
controller: timeController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.watch_later_outlined),
hintText: 'write a time',
labelText: 'Time',
border: OutlineInputBorder(),
),
onTap: () {
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
).then((value) {
timeController.text =
value!.format(context).toString();
print(value!.format(context));
});
},
),
],
),
),
),
);
}
isBottomSheetShown = true;
setState(() {
fabIcon = Icons.add;
});
},
child: Icon(
fabIcon,
)),
The Unexpected null value is occurring because you're asserting that formKey.currentState is not null before you validate it, so if currentState equals null, it will throw that error.
I'd suggest first checking if formKey.currentState != null before calling the validate method.
I'm trying to clear the text when a user click on the X icon and my search result got empty when I click it but my input text is still there so I would be really appreciated if I can get any help or suggestion on how I can clear the inputed text too.
Expanded(
flex: 8,
child: GestureDetector(
onTap: () {},
child: TextFormField(
autofocus: true,
enabled: true,
onChanged: (va) {
filterSearchResult(va, model);
},
decoration: InputDecoration(
floatingLabelBehavior:
FloatingLabelBehavior.never,
border: InputBorder.none,
hintStyle: TextStyle(
color:
Theme.of(context).secondaryHeaderColor)),
),
)),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
items.clear();
itemList.clear();
});
},
child: Image.asset(
"assets/icons/cancel.png",
color: Theme.of(context).secondaryHeaderColor,
height: 30,
)),
),
You should use TextEditingController to clear the value of TextFormField.
// Some code ...
final textEditingController = TextEditingController();
// Some code ...
Expanded(
flex: 8,
child: GestureDetector(
onTap: () {},
child: TextFormField(
autofocus: true,
enabled: true,
controller: textEditingController, // Your TextEditingController here
onChanged: (va) {
filterSearchResult(va, model);
},
decoration: InputDecoration(
floatingLabelBehavior: FloatingLabelBehavior.never,
border: InputBorder.none,
hintStyle:
TextStyle(color: Theme.of(context).secondaryHeaderColor),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
textEditingController.clear(); // Clear the TextFormField
items.clear();
itemList.clear();
});
},
child: Image.asset(
"assets/icons/cancel.png",
color: Theme.of(context).secondaryHeaderColor,
height: 30,
),
),
),
I use TextEditingController myController and set myController.text to null
I am trying to move to other TextFormField but whenever I lose focus from first TextFormField text became empty, I search about this issue but I don't find any solution till now.
var _formKey = GlobalKey<FormState>();
Note note;
TextEditingController titleController=TextEditingController();
TextEditingController descriptionController=TextEditingController();
#override
Widget build(BuildContext context) {
TextStyle textStyle=Theme.of(context).textTheme.title;
titleController.text=note.title;
descriptionController.text=note.description;
// TODO: implement build
return WillPopScope(
onWillPop: (){
moveToLastScreen();
},
child:Scaffold(
appBar: AppBar(
title: Text("appBarTitle"),
leading: IconButton(icon:Icon(Icons.arrow_back),onPressed: (){
moveToLastScreen();
},),
),
body: Form(
key: _formKey,
child: Padding(
padding: EdgeInsets.only(top: 15.0,left: 15.0,right: 10.0),
child: ListView(
children: <Widget>[
//1st element
Padding(
padding: EdgeInsets.only(top: 15.0,bottom: 15.0,),
child: TextFormField(
validator: (String value){
if(value.isEmpty)
{
return "Please enter Title";
}
},
controller: titleController,
style: textStyle,
onSaved: (value){
debugPrint("Something changed in title Text field");
updateTitle();
},
/*onChanged: (value){
debugPrint("Something changed in title Text field");
updateTitle();
},*/
decoration: InputDecoration(
labelText: "Title",
labelStyle: textStyle,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
),
),
),
//2nd element
Padding(
padding: EdgeInsets.only(top: 15.0,bottom: 15.0,),
child: TextFormField(
validator: (String value){ //2nd step for form with validation
if(value.isEmpty)
{
return "Please enter principle amount";
}
},
onSaved: (value){
debugPrint("Something changed in Description Text field");
updateDescription();
},
controller: descriptionController,
style: textStyle,
/*onChanged: (value){
debugPrint("Something changed in Description Text field");
updateDescription();
},*/
decoration: InputDecoration(
labelText: "Description",
labelStyle: textStyle,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
),
),
),
//3th element
Padding(
padding: EdgeInsets.only(top: 15.0,bottom: 15.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
color: Theme.of(context).primaryColorDark,
textColor: Theme.of(context).primaryColorLight,
child: Text("Save",textScaleFactor: 1.5,),
onPressed: (){
setState(() {
if(_formKey.currentState.validate()) {
debugPrint("Save Pressed");
_save();
}
});
}
),
),
Container(width: 5.0,),
Expanded(
child: RaisedButton(
color: Theme.of(context).primaryColorDark,
textColor: Theme.of(context).primaryColorLight,
child: Text("Delete",textScaleFactor: 1.5,),
onPressed: (){
setState(() {
debugPrint("Delete Pressed");
_delete();
});
}
),
),
],
),
),
],
),
)),
));
}
Please suggest me I am new in flutter.
Remove titleController.text=note.title; descriptionController.text=note.description; from your build method and place it in initState method.
You will lose the value in the textField because those lines get executed anytime there is a rebuild, thereby replacing the values gotten from the textFields and replacing it with note.title and note.description which are empty at that point.
In other words, remove those lines and add this to your code.
#override
void initState() {
super.initState();
titleController.text=note.title;
descriptionController.text=note.description;
}