I'm facing something strange. I have textfield in my app that can be cleared without problem, and once cleared, the delete icon disappears.
But, when i want to clear a textfield that is in a AlertDialog, the text is cleared, but the icon to delete stays on.
final TextEditingController _namespaceController = TextEditingController();
void clearNamespaceController() {
_namespaceController.clear();
setState(() {});
}
Widget _displayDialogForEdition(result, index, context) {
return IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() {
_namespaceController.text = result[index].name;
});
showDialog<String>(
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Text("Modification d'une configuration"),
content: Container(
// padding: EdgeInsets.all(16),
child: TextField(
controller: _namespaceController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search, color: Theme.of(context).primaryColor),
border: OutlineInputBorder(),
labelText: 'Exclure le Namespace',
suffixIcon: _namespaceController.text.length == 0
? null
: IconButton(
icon: Icon(Icons.clear),
onPressed: clearNamespaceController,
),
labelStyle: Theme.of(context).textTheme.headline6),
),
),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
),
);
});
}
You need to use StatefulBuilder() to use setState() inside AlertBox(). Using StatefulBuilder() it build the UI of only your AlertBox(). If you don't use StatefulBuilder() the UI of your AlertBox() wont update if you check your _controller.text==0 and change your Icon.
You can use like this.
showDialog(
context: context,
builder: (ctx) {
bool isTextClear = true;
return StatefulBuilder(builder: (ctx, setState) {
return AlertDialog(
title: Text("Add name"),
content: Container(
child: TextField(
controller: _controller,
onChanged: (val) {
setState(
() {
if (_controller.text.isEmpty) {
isTextClear = true;
} else {
isTextClear = false;
}
},
);
},
decoration: InputDecoration(
labelText: "Name",
prefixIcon: Icon(Icons.search),
suffixIcon: isTextClear
? null
: IconButton(
onPressed: () {
setState(() {
isTextClear = true;
_controller.clear();
});
},
icon: Icon(
Icons.clear,
),
),
),
),
),
);
});
},
);
You can try here
That's because your TextField holds the Focus you need to unfocus that in order to get what you want.
Related
On click of floatingActionButton in main.dart file, I'm calling a dialog widget.
main.dart
late ShoppingListDialog dialog;
#override
void initState() {
dialog = ShoppingListDialog();
super.initState();
}
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.add,
),
backgroundColor: Colors.pink,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) => dialog.buildDialog(
context, ShoppingList(id: 0, name: '', priority: 0), true),
);
},
),
shopping_list_dialog.dart
class ShoppingListDialog {
final txtName = TextEditingController();
final txtPriority = TextEditingController();
Widget buildDialog(BuildContext context, ShoppingList list, bool isNew) {
DbHelper helper = DbHelper();
if (!isNew) {
txtName.text = list.name;
txtPriority.text = list.priority.toString();
}
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
title: Text((isNew) ? 'New shopping list' : 'Edit shopping list'),
content: SingleChildScrollView(
child: Column(
children: [
TextField(
controller: txtName,
onTap: () {},
decoration: InputDecoration(hintText: 'Shopping List Name')),
TextField(
controller: txtPriority,
keyboardType: TextInputType.number,
decoration:
InputDecoration(hintText: 'Shopping List Priority (1-3)'),
),
TextButton(
child: Text('Save Shopping List'),
onPressed: () {
list.name = txtName.text;
list.priority = int.parse(txtPriority.text);
helper.insertList(list);
Navigator.pop(context);
},
),
],
),
),
);
}
}
TextField is empty, the first time (showing the hint text). But the second time onwards, it gets filled with the last used values, while I intend them to be empty. Like in the image below, the second time when I hit on floatingActionButton to add something, it gets filled with "fruits"(values I had used previously).
TextField should start empty but it's getting filled with previous used values.
Here is a basic solution for you
TextButton(
child: Text('Save Shopping List'),
onPressed: () {
list.name = txtName.text;
list.priority = int.parse(txtPriority.text);
// Clear TE Controller
txtName.clear();
txtPriority.clear();
// Insert
helper.insertList(list);
Navigator.pop(context);
},
),
I am using the CupertinoSearchTextField in my app. It is working fine so far but I am missing one feature: the Cancel-Button.
In native iOS you can set to show the button which looks like this:
Does Flutter provide this functionality? I couldn't find it anywhere.
Clarification:
I don't mean the x/clear-button. I know that is build-in. What I mean is the actual Cancel-button which removes focus from the textField.
use Typeahead package.then in suffixIcon, you can add cancel feature to clear field.
TypeAheadField<String>(
hideOnEmpty: true,
minCharsForSuggestions: 2,
getImmediateSuggestions: true,
textFieldConfiguration: TextFieldConfiguration(
controller: cont_search,
cursorColor: Colors.grey,
textInputAction: TextInputAction.search,
decoration: InputDecoration(
//here the cancel button
suffixIcon: IconButton(
padding: EdgeInsets.fromLTRB(8, 4, 8, 8),
icon: Icon(Icons.clear),
onPressed: (){
cont_search.clear();
},
),
focusColor: Colors.black,
focusedBorder: InputBorder.none,
border: InputBorder.none,
//hintText: 'What are you looking for?',
icon: Icon(Icons.search),
),
onSubmitted: (value){
print("value taken is ${value}");
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => search_page(value)
));
}
),
suggestionsCallback: (String pattern) async {
return matches
.where((item) =>
item.toLowerCase().startsWith(pattern.toLowerCase()))
.toList();
},
itemBuilder: (context, String suggestion) {
return ListTile(
title: Text(suggestion),
);
},
onSuggestionSelected: (String suggestion) {
//push to page
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => search_page(suggestion)
));
print("Suggestion selected ${suggestion}");
},
)
If you wanna override x/clear-button's behaviour to unfocus the textfield, use this. Otherwise, you can put search textfield and a clear button in a row and implement button's behaviour like this. Problem solved.
onSuffixTap: (){
FocusScope.of(context).unfocus();
}
I ended up building it myself. I made use of the Focus-Widget and most important the AnimatedPadding. My code looks like this:
Row(
children: [
Flexible(
child: AnimatedPadding(
duration: const Duration(milliseconds: 100),
padding: EdgeInsets.only(right: _isSearching ? 50 : 0),
child: Focus(
onFocusChange: (hasFocus) {
setState(() {
_isSearching = hasFocus;
});
},
child: CupertinoSearchTextField(
placeholder: 'Suche'.tr,
controller: _textEditingController,
focusNode: _focusNode,
),
),
),
),
if (_isSearching)
Tappable(onTap: () {
dismissKeyboard();
}, builder: (context, isTapped) {
return AnimatedText(
text: 'Abbrechen',
isTapped: isTapped,
style: AppTextStyles.avenirNextH4Regular,
color: grey,
);
}),
],
),
We are trying to update a switch tile within a modal bottom and I suspect this is effecting the state somehow but I am not sure how to resolve this issue.
ListTile(
title: const Text('Transactional'),
subtitle: const Text('Email, Push, SMS'),
trailing: Icon(Icons.adaptive.arrow_forward),
onTap: () {
HapticFeedback.lightImpact();
showModalBottomSheet(
barrierColor: Colors.black.withOpacity(0.5),
enableDrag: true,
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.vertical(top: Radius.circular(20))),
context: context,
builder: (context) {
// Using Wrap makes the bottom sheet height the height of the content.
// Otherwise, the height will be half the height of the screen.
return Wrap(alignment: WrapAlignment.center, children: [
bottomSheetBar(),
ListTile(
title: Text('Transactional',
style: Theme.of(context).textTheme.titleLarge),
),
ListTile(
title: Text(
'Recieve important notifications about any payments, cancellations and about your acccount.',
style: Theme.of(context).textTheme.bodyMedium),
),
SwitchListTile(
title: const Text('Push'),
value: _push,
onChanged: (bool value) {
setState(() {
_push = value;
});
},
// secondary: const Icon(Icons.lightbulb_outline),
),
SwitchListTile(
title: const Text('Email'),
value: _email,
onChanged: (bool value) {
setState(() {
_email = value;
});
},
// secondary: const Icon(Icons.lightbulb_outline),
),
SwitchListTile(
title: const Text('SMS'),
value: _sms,
onChanged: (bool value) {
setState(() {
_sms = value;
});
},
// secondary: const Icon(Icons.lightbulb_outline),
),
ElevatedButton(
onPressed: () {}, child: const Text('Done')),
const SizedBox(height: 20),
]);
},
);
},
),
you could use the StatefulBuilder widget above the wrap and thus only update the state within it and not the entire modal
Recently implemented a tagForm widget at "+" button press, I want to delete those widgets now at "delete" button press, but right now, even when I press the "delete" button, nothing happens.
How can I solve this?
Any help appreciated!
code:
import 'package:flutter/material.dart';
import '../database/firestoreHandler.dart';
import '../models/todo2.dart';
import '../widgets/dialogs.dart';
class TodoEdit extends StatefulWidget {
String? doctitle;
String? doctdescription;
String? docimage;
String? docid;
List? doctags;
TodoEdit({Key? key, this.doctitle, this.doctdescription, this.docimage, this.docid,this.doctags}) : super(key: key);
#override
_TodoEditState createState() => _TodoEditState();
}
class _TodoEditState extends State<TodoEdit> {
final _formKey = GlobalKey<FormState>();
final tcontroller = TextEditingController();
final dcontroller = TextEditingController();
final icontroller = TextEditingController();
var textEditingControllers = <TextEditingController>[];
//-----------------the list where the form is stored----------
var textformFields = <Widget>[];
void _addformWidget(controller) {
setState(() {
textformFields.add(tagForm(controller));
});
}
//------------------------------------------------------------------------
Widget tagForm(controller){
return TextFormField(
controller: controller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Tag",
labelStyle: TextStyle(color: Colors.white60),
fillColor: Colors.black,
filled: true,
suffixIcon: IconButton(
icon:Icon(Icons.delete, color: Colors.white,),
//--------------------- doesn't work?-------------------
onPressed: (){
setState(() {
textformFields.remove(tagForm(controller));
});
},
--------------------------------------------------------------
)
),
);
}
//-----------------------------------------------------------
#override
void initState() {
super.initState();
tcontroller.text = widget.doctitle.toString();
dcontroller.text = widget.doctdescription.toString();
icontroller.text = widget.docimage.toString();
widget.doctags?.forEach((element) {
var textEditingController = new TextEditingController(text: element);
textEditingControllers.add(textEditingController);
//return textformFields.add(tagForm(textEditingController)
return _addformWidget(textEditingController);
//);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
actions: [
IconButton(onPressed: (){
showDialog(
barrierDismissible: false,
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
title: Text('Delete TODO'),
actions: [
TextButton(
child: Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text('Delete'),
onPressed: () {
deleteData(widget.docid.toString(), context);
setState(() {
showSnackBar(context, 'todo "${widget.doctitle}" successfully deleted!');
});
},
),
],
);
},
);
},
icon: Icon(Icons.delete))
],
backgroundColor: Colors.grey[900],
title: Text("${widget.doctitle}"),
),
body: Container(
child: SafeArea(
child: Form(
key: _formKey,
child: Column(
children: [
SizedBox(height: 10),
TextFormField(
controller: tcontroller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Title",
labelStyle: TextStyle(color: Colors.white60),
fillColor: Colors.black,
filled: true,
),
),
SizedBox(height: 10),
TextFormField(
controller: dcontroller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Description",
labelStyle: TextStyle(color: Colors.white60),
fillColor: Colors.black,
filled: true,
),
),
SizedBox(height: 10),
TextFormField(
controller: icontroller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Image url",
labelStyle: TextStyle(color: Colors.white60),
fillColor: Colors.black,
filled: true,
),
),
SizedBox(height: 10),
Row(children: [
Text("Tags:", style:TextStyle(color: Colors.white)),
IconButton(onPressed: (){
var textEditingController = new TextEditingController(text: "tag");
textEditingControllers.add(textEditingController);
_addformWidget(textEditingController);
print(textformFields.length);
},
icon: Icon(Icons.add,color: Colors.white,),
)
],),
/*SingleChildScrollView(
child: new Column(
children: textformFields,
)
),*/
Expanded(
child: SizedBox(
height: 200.0,
child: ListView.builder(
itemCount: textformFields.length,
itemBuilder: (context,index) {
return textformFields[index];
}),
)
),
],
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
List<String> test = [];
textEditingControllers.forEach((element) {
test.add(element.text);
});
if(tcontroller == '' && dcontroller == '' && icontroller == ''){
print("not valid");
}else{
var todo = Todo2(
title: tcontroller.text,
description: dcontroller.text,
image: icontroller.text,
tags: test,
);
updateData(todo, widget.docid.toString(),context);
setState(() {
showSnackBar(context, 'todo ${widget.doctitle} successfully updated!');
});
}
},
child: Icon(Icons.update),
),
);
}
}
You can't remove anything from the list with objects from tagForm(controller), because these objects are newly created and therefore not the same as in the list (as long as the == operator is not overwritten)
If you still want to have the widgets in a list instead of just storing the controllers and without having to change much, you could remove the widgets like this:
onPressed: (){
setState(() {
controller.dispose();
textEditingControllers.remove(controller);
textformFields.removeWhere((w) => w.controller = controller));
});
},
and change the type of your List: var textformFields = <TextFormField>[]; and of the method TextFormField tagForm(controller).
In general, you can of course optimize the state management, but with this solution it should work for now.
Dont't store Widget, it is bad way. Insteads store there property, render by List then remove by index when you need.
ps: some code syntax can wrong, i write this on browser.
class _TodoEditState extends State<TodoEdit> {
...
var textformFields = <String>[];
...
void _addformWidget([String? initValue]) {
setState(() => textformFields.add(initValue ?? ""));
}
...
Widget tagForm(String value, void Function(String) onChange, void Function() onRemove){
var openEditor = () {
// Open dialog with text field to edit from [value] call onChange with
// new value
OpenDialog().then((newvalue) {
if(newvalue != null) onChange(newvalue);
}
};
var delete = () {
// Open confirm dialog then remove
OpenConfirmDialog("your message").then((continue) {
if(continue) onRemove();
});
};
return InkWell(
onTap: openEditor,
child: Text(value), // render your tag value
);
}
...
#override
void initState() {
...
textformFields = List.filled(widget.doctags ?? 0, ""); // or List.generate/map if you want replace by own value.
}
...
#override
Widget build(BuildContext context) {
...
ListView.builder(
itemCount: textformFields.length,
itemBuilder: (context,index) => tagForm(
textformFields[index],
(newvalue) => setState(() => textformFields[index] = newvalue),
() => setState(() => textformFields = textformFields..removeAt(index));,
),
),
...
);
}
Is anyone know how to make the text editable after I press the button? I want it to be editable only when the user clicks the button. Below is the result that I needed.
If I want to edit the text "Festive Leave", then I need to click the edit button.
I think this should do what you want.
TextEditingController _controller =
TextEditingController(text: "Festive Leave");
bool _isEnable = false;
//These are initialize at the top
Row(
children: <Widget>[
Container(
width: 100,
child: TextField(
controller: _controller,
enabled: _isEnable,
),
),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() {
_isEnable = true;
});
})
],
),
Row(
children: <Widget>[
Container(
width: 100,
child: TextField(
decoration: InputDecoration(
hintText: "Festive Leave",
hintStyle: TextStyle(color: Colors.black),
),
enabled: _isEnable,
),
),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() {
_isEnable = true;
});
})
],
),
your choice this one the text will go away as soon as the user starts to type though
I think this will help you
class SampleDemo extends StatefulWidget {
#override
_SampleDemoState createState() => _SampleDemoState();
}
class _SampleDemoState extends State<SampleDemo> {
String title = "MyTitle";
bool isEditable=false;
#override
Widget build(BuildContext context) {
return Row(children: [
Expanded(
child: !isEditable
? Text(title)
: TextFormField(
initialValue: title,
textInputAction: TextInputAction.done,
onFieldSubmitted: (value) {
setState(() => {isEditable = false, title = value});
})),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() => {
isEditable = true,
});
},
)
]);
}
}