Flutter: How to change variables through TextFormField in a AlertDialog? - flutter

I want to implement a function as following:
There is a button named 自定义. In this page, there is a variable named money. When I click the button, an AlertDialog with a TextFormField inside will occur. I hope that after inputting a number X into the TextFormField and clicking button ok to exit the AlertDialog, money would be changed to X. I have used onSaved to save the variable, and used _formkey.currentState.save(), but money didn't change. What's wrong with my codes? Here are my codes:
void _showMessageDialog() {
//int addMoney = 0;
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
key: _formKey,
title: new Text('INPUT'),
content: TextFormField(
maxLines: 1,
keyboardType: TextInputType.emailAddress,
autofocus: false,
style: TextStyle(fontSize: 15),
decoration: new InputDecoration(
border: InputBorder.none,
hintText: 'input',
),
onSaved: (value) {
money = int.parse(value?.trim() ?? '0') as double;
print(money);
}
),
actions: <Widget>[
new TextButton(
key: _formKey,
child: new Text("ok"),
onPressed: () {
_formKey.currentState?.save();
Navigator.of(context).pop();
},
),
],
);
},
);
}
Here are the codes relative to the button 自定义
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 1,
color: Colors.blueAccent
)
),
onPressed: () {
// Navigator.of(context).push(
// _showMessageDialog()
// );
_showMessageDialog();
},
child: Text(
"自定义",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.blueAccent
),
),
),
I know maybe I have made a big mistake, but it is my first Flutter project. Thanks for your advices.

I would use ValueNotifier for this. But first you need to add a controller to your TextFormField so you can get the text user typed in.
//initialize it
final myController = TextEditingController();
TextFormField(
controller: myController, //pass it to the TextFormField
),
TextButton(
child: new Text("ok"),
onPressed: () {
String input = myController.text; //this is how you get the text input
_formKey.currentState?.save();
Navigator.of(context).pop();
},
),
As I said you also need to initialize ValueNotifier and pass it to _showMessageDialog
ValueNotifier<int> money = ValueNotifier(0);
_showMessageDialog(money); //and pass it to your function
void _showMessageDialog(ValueNotifier<int> money) {
TextButton(
child: new Text("ok"),
onPressed: () {
String input = myController.text; //this is how you get the text input
money.value = int.parse(input); //and then update your money variable
_formKey.currentState?.save();
Navigator.of(context).pop();
},
),
}

Related

TextField (in flutter) getting filled with previously filled values (unintentionally)

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);
},
),

Delete Widget at button press Flutter

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));,
),
),
...
);
}

Clear controller textfield flutter

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.

Flutter Flatbutton onpressend not working

I have a register page in which there are 3 input fields and on next button i need to change the input field and show the other so i have simply use boolean to show/hide input. But when i click on button its not changing the fields (Mean change the boolean to false/true) And even i try to simply add print so i can check but its not even printing the value. But if i use navigator to change page its working fine in button.
My code
class Body extends StatefulWidget {
#override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
bool first = true;
bool second = false;
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Background(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"SIGNUP",
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: size.height * 0.03),
SvgPicture.asset(
"assets/icons/signup.svg",
height: size.height * 0.35,
),
first ? RoundedInputField(
hintText: "Your Name",
icon: Icons.person,
onChanged: (value) {},
) : Container(),
first ? RoundedInputField(
hintText: "Your Email",
icon: Icons.mail,
onChanged: (value) {
print(value);
},
) : Container() ,
first ? RoundedPasswordField(
onChanged: (value) {},
) : Container() ,
second ? RoundedInputField(
hintText: "Your Number",
icon: Icons.phone,
onChanged: (value) {
print(value);
},
) : Container() ,
first ? Container(
margin: EdgeInsets.symmetric(vertical: 10),
width: size.width * 0.8,
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: FlatButton(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
color: kPrimaryColor,
onPressed: (){
print('working');
setState(){
first = false;
second = true;
}
},
child: Text(
'NEXT',
style: TextStyle(color: Colors.white),
),
),
),
): Container(),
second ? RoundedButton(
text: "REGISTER",
press: () {
print('working');
},
) : Container() ,
SizedBox(height: size.height * 0.03),
AlreadyHaveAnAccountCheck(
login: false,
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return LoginScreen();
},
),
);
},
),
],
),
),
);
}
}
i am using setState to change the boolean value which isn't working also try to simply print the string but its also not working. If i use navigator in this to change page its working fine
You should declare first and second at instance level, otherwise they will created again with default values after setStateis executed.
class Body extends StatelessWidget {
bool first = true;
bool second = false;
#override
Widget build(BuildContext context) {
....
}
}
setState is used incorrectly. You need to have
setState((){
first = false;
second = true;
});
Your code is calling setState without any action and after that, you change first and second variables (but outside setState).
Your code is equivalent to
setState();
first = false;
second = true;
You should not declare again first and second inside onPressed, otherwise you'll be dealing with new variables which only scope is this method
setState((){
first = false;
second = true;
});
Your widget needs to be stateful and not stateless, otherwise it can't change the state.

Show/Hide data inside the dialog box in flutter

I have a dialog box, which has a TextField(), and a Button. On press of it, I'm calling my API, but before that, I need to put a check on the text. Since everything works fine, I was wondering to find some way out to show the error text inside the dialog box only.
After all the research and work, the dialog box is not recreating itself hence no message is showing even if the boolean case becomes true.
CODE:
class ListViewElements extends StatefulWidget {
#override
_ListViewElementsState createState() => _ListViewElementsState();
}
class _ListViewElementsState extends State<ListViewElements> {
bool isError = false;
bool errorText = false;
final TextEditingController _code = new TextEditingController();
onSubmit(BuildContext context){
if(this._code.text.isEmpty){
setState(
(){
isError = true;
errorText = 'Empty space';
}
);
}
}
void registerDialog(BuildContext context){
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context){
return AlertDialog(
content: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(40.0, 0.0, 40.0, 10.0),
child: TextField(
textAlign: TextAlign.center,
controller: this._code,
maxLength: 4,
textInputAction: TextInputAction.done,
cursorColor: Theme.of(context).primaryColor,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter here',
counterText: '',
)
)
),
isError == true ? Text(this.erroText) : Container()
]
),
actions: <Widget>[
FlatButton(
child: new Text("Done", style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 17.0)),
onPressed: () {onSubmit(context);}
)
]
);
}
);
I thought of showing a SnackBar(), but for dialog box, Scaffold.of() is not working out, since the builder is creating the new instance of the box, hence cannot recall. Any help would be appreciated. Thanks :)