alertDialog won't appear in flutter - flutter

I have a list item when long pressed executes _selectionAlert which have two buttons one for delete and one for edit(refer image). Delete works fine but when I press on edit it should execute _editAlert which should show another alertDialog but when I click it nothing happens what's the problem here?
This is responsible to show alert dialog in _selectionAlert
TextButton( // refer code bellow
child: Text('Edit', style: TextStyle(color: Colors.grey)),
onPressed: (){
_editAlert();
Navigator.of(context).pop();
},
)
This bellow code runs when item is long pressed:
void _selectionAlert(){
var selItem = AlertDialog(
title: Text('What you want to do?'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextButton( // ignore this it is for deletion this works fine
child: Text('Delete', style: TextStyle(color: Colors.red)),
onPressed: (){
_deleteItem();
Navigator.of(context).pop();
},
),
TextButton(
child: Text('Edit', style: TextStyle(color: Colors.grey)),
onPressed: (){
_editAlert(); // this line should call _editAlert
Navigator.of(context).pop();
},
)
],
),
);
showDialog(
context: context,
builder: (BuildContext context){
return selItem;
}
);
}
Representation of above code:
void _editAlert(){ // edit alertDialog
var editItem = AlertDialog(
title: Text('Edit'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(
hintText: 'Edit Item',
),
controller: addeditem,
),
TextButton(
child: Text('Done'),
onPressed: (){
_editItem();
Navigator.of(context).pop();
}
)
],
),
);
showDialog(
context: context,
builder: (BuildContext context){
return editItem;
}
);
}
PS: edit button is of grey color the button surely is clickable and I am testing on google chrome.
Regards

Try to add return statement at your _editAlert method
_editAlert(){ // edit alertDialog
var editItem = AlertDialog(
title: Text('Edit'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(
hintText: 'Edit Item',
),
controller: addeditem,
),
TextButton(
child: Text('Done'),
onPressed: (){
_editItem();
Navigator.of(context).pop();
}
)
],
),
);
return showDialog( //like that
context: context,
builder: (BuildContext context){
return editItem;
}
);
}
Also your way is right,you can use poping for close previous pop up.

Related

How to call a Dialog Function From another Class in Flutter

I want to Call a Dialog Function from another Class File in flutter what is the Proper Way of doing That...
File1:-
import 'package:eg/eg/dialog_file.dart'
floatingActionButton: FloatingActionButton(
onPressed: () {
// This is where I want to call the function
},
backgroundColor: Colors.black,
child: Container(
child: Icon(
icons.add,
size: 23,
color: Colors.white,
),
),
),
File2:-
showMyDialog(parentContext) {
return showDialog(
context: parentContext,
builder: (context) {
return SimpleDialog(
title: Text("Title"),
children: <Widget>[
SimpleDialogOption(
child: Text("Option1"),
onPressed: function1,
),
SimpleDialogOption(
child: Text("Option2"),
onPressed: function2,
),
SimpleDialogOption(
child: Text("Option3"),
onPressed: function3,
),
],
);
},
);
}
So the Dialog Function have onPressed Functions that are in the File2 so I am unable to write a custom dialog Function in File1
how could I achieve this?
You don't mention where your function1 etc... come from but in general here is one way call a dialog from another class. I make them static so I don't have to create an instance of the class.
class Dialogs {
static Future<void> showMyDialog(parentContext) {
return showDialog(
context: parentContext,
builder: (context) {
return SimpleDialog(
title: Text("Title"),
children: <Widget>[
SimpleDialogOption(child: Text("Option1"), onPressed: () {}),
SimpleDialogOption(child: Text("Option2"), onPressed: () {}),
SimpleDialogOption(child: Text("Option3"), onPressed: () {})
],
);
},
);
}
}
And here's an example of a button that will display the above dialog by passing in the context from the build method that it is inside of.
ElevatedButton(
onPressed: () => Dialogs.showMyDialog(context),
child: Text('Dialog'),
),
You should try below answer :
First write your Dialog Function in other class
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white30,
child:AlertDialog(
title: Text(
'name',
style: TextStyle(
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
content: Text(
'name',
style: TextStyle(
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('OK'),
)
],
),
);
}
Then write dialog class function in other class or where you call it like below:
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CampaignData(),
),
);
},

How to call flutter dialog from separate class?

I need to separate my dialog to separate widgets an call from anywhere on some button click. Now my code looks like:
import 'package:flutter/material.dart';
class PlacesListScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return _Map();
}
}
class _Map extends StatefulWidget {
#override
_MapState createState() => _MapState();
}
class _MapState extends State<_Map> {
final _titleController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('App name'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: Text(
"Dialog title",
textAlign: TextAlign.center,
),
content: TextField(
decoration: InputDecoration(labelText: 'Title'),
controller: _titleController,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => StatefulBuilder(builder:
(BuildContext context, StateSetter setState) {
return AlertDialog(
title: Text(
"Second subdialog title",
textAlign: TextAlign.center,
),
content: Container(
width: 150,
height: 200,
decoration: BoxDecoration(
border:
Border.all(width: 1, color: Colors.grey),
),
child: Text('Here will be file'),
alignment: Alignment.center,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: () => Text('Here I will work with state'),
child: Text("Yes"),
),
],
);
}),
);
},
child: Text("Yes"),
),
],
),
);
},
),
],
),
body: Text('App body here'),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FloatingActionButton(
onPressed: () => Text('Here will be called dialog function'),
child: Icon(Icons.add, color: Colors.white),
backgroundColor: Colors.green,
heroTag: 'mapZoomIn',
),
],
),
);
}
}
Now how I can this part of code (calling dialog) separate to another widget and call then using created widget.
showDialog(
context: context,
builder: (ctx) => StatefulBuilder(builder:
(BuildContext context, StateSetter setState) {
return AlertDialog(
title: Text(
"Second subdialog title",
textAlign: TextAlign.center,
),
content: Container(
width: 150,
height: 200,
decoration: BoxDecoration(
border:
Border.all(width: 1, color: Colors.grey),
),
child: Text('Here will be file'),
alignment: Alignment.center,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: () => Text('Here I will work with state'),
child: Text("Yes"),
),
],
);
}),
);
Firstly, you can refactor your StatefulBuilder(builder: (BuildContext context, StateSetter setState) { return AlertDialog(... into one separate widget like MyFancyDialog extends StatefulWidget. Then just call showDialog(..., MyFancyWidget()) when you need it.
Secondly, if you do not want the first method, you can extract the whole showDialog(...) into a function like void showMyFancyDialog() { showDialog... }. Is it also OK, since in dart functions are first class.
Did you try to create a new Stateful widget class at the bottom of your code and try to call that widget? If you didn't try that,
Go to under of your code and create a new Stateful class. (Let's say that myDialog)
Add the code that you want to call, inside of your "myDialog" widget
Go for where you want to call that code and try to call that class.
Hope this works for you.
Create a separate file. Import material package.
then create "Widget myDialog(context){ // paste your showDialog code here }"
Now your myDialog widget has been ready for using anywhere on whole project just import and call it.
When you call it pass BuildContext in its argument.
Its work for me.

How to deal with setState properly

void showSimpleCustomDialog(BuildContext context, String listName) async{
if(randList.isEmpty){
randList = await theDb.queryWhere("$listName");
}else{
randList.clear();
randList = await theDb.queryWhere("$listName");
}
setState((){
});
String randValue = "Click generate new to get a random value";
Dialog simpleDialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
child: Text(
"$randValue"
),
),
Padding(
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.blue,
onPressed: ()
String lol = randList[0 + rng.nextInt(randList.length - 0)].getItem();
print(randValue);
setState(() {
randValue = lol;
});
},
child: Text(
'generate new',
style: TextStyle(fontSize: 18.0, color: Colors.white),
),
)
],
),
),
],
),
),
);
showDialog(
context: context, builder: (BuildContext context) => simpleDialog);}
When I am clicking on "generate new" button I want to update my randomValue and to display that randomValue as Text Widget. To do that dynamically Im using setState, but it is not working, and i dont understand why. Please help me.
You should use StatefulBuilder with dialogue.
showDialog(
context: context,
builder: (context) {
String contentText = "Content of Dialog";
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: Text("Title of Dialog"),
content: Text(contentText),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.pop(context),
child: Text("Cancel"),
),
FlatButton(
onPressed: () {
setState(() {
contentText = "Changed Content of Dialog";
});
},
child: Text("Change"),
),
],
);
},
);
},

How did i setup popup AlertDialog?

How did i setup popup AlertDialog when int is equal or greater than 100?
showDialog(
context: _context,
builder: (BuildContext context) => AlertDialog(
title: Text("$_winner Won"),
)
);
void scoreTeamA() {
setState(() {
outputTeamA += _choiceA;
});
}
// I would like to show outputTeamA on the AlertDialog
Thank you
Mohammad
One way is to create a Widget for the AlertDialog and pass the String/Widget you want to show on that dialog.
class LoadingDialog{
static Future<void> showLoadingDialog(BuildContext context,String text) async {
return showDialog(
context: context,
builder: (BuildContext context){
return SimpleDialog(
children: <Widget>[
Center(
child: Container(
child: Column(
children: <Widget>[
SizedBox(
height:10,
),
Text(text),
]
),
),
),
],
),
}
);
}
}
then you can call on an Event like:
void scoreTeamA(){
outputTeamA += _choiceA;
LoadingDialog.showLoadingDialog(context, outputTeamA);
}
Note: this code might have some errors. i haven't tested this.
This is how I display an AlertDialog
showAlertDialog() {
return showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
side: BorderSide(color: Colors.redAccent, width: 2.0),
),
elevation: 6,
titlePadding: EdgeInsets.all(8.0),
titleTextStyle: TextStyle(
fontSize: 18, color: Colors.red, fontWeight: FontWeight.bold),
title: Text(
'This is the alert title',
textAlign: TextAlign.center,
),
contentPadding: EdgeInsets.all(8.0),
contentTextStyle: TextStyle(fontSize: 14, color: Colors.black),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Content...')
//content goes here
],
),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop(), child: Text('Okay'))
],
),
);
}
And then you would do your if check to check
if( outputTeamA >= 100){
showAlertDialog();
}
Of course you could use outputTeamA in AlertDialog

Column take all the screen

I'm making a flutter app in which I use an AlertDialog widget
Here is a screen in which you can understand where the problem is :
Here is a piece of my code used for that
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: Text('Ajouter un ingrédient'),
content: new Column(
children: <Widget>[
Container(
child: DropDownButtonIngredients(),
),
Container(
child: new TextField(
autofocus: false,
decoration: new InputDecoration(
labelText: 'Nom', hintText: 'Frite, Steak, Salade ...'),
onChanged: (value) {
newIngr = value;
},
)),
],
),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Note : I already tried to remove the DropDownButtonIngredients container, nothing new, same for the other container
Set mainAxisSize to MainAxisSize.min:
Column(
mainAxisSize: MainAxisSize.min,
...
);