I'm new in flutter. I want to adjust the dimensions and other properties like background color of the CupertinoAlertDialog. I have searched in the documents and tried some properties but didn't work. For background color example, I have tried to put it into a Container and set its color. Definitely it didn't work. So how can I achieve it? Thanks in advance.
Container(
color: Colors.red,
child: CupertinoAlertDialog(
title: Text('dropOut'), //对话框标题
content: SingleChildScrollView(
),
actions: [
CupertinoDialogAction(
child: Text('cancel'),
onPressed: () {},
),
CupertinoDialogAction(
child: Text('OK'),
onPressed: () {},
),
],
),
),
Edited: I tried the method suggested by #Salim Murshed, but it didn't seem work so well. here is my code and the display!
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
body: RaisedButton(
child: Text("Pick Me !!!"),
onPressed: () {
showDialog(
context: context,
builder: (_) => Center(
child: Container(
width: 270, height: 140,
color: Colors.red,
child: CupertinoAlertDialog (
title: new Text("Material Dialog"),
content: new Text("Hey! I'm Coflutter!"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.pop(_);
},
)
],
),
),
));
},
)
),
);
}
You can check the below code.
RaisedButton(
child: Text("Pick Me !!!"),
onPressed: () {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Material Dialog"),
content: new Text("Hey! I'm Coflutter!"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.pop(_);
},
)
],
));
},
)
Related
I need to display a set of options on a pop-up.
The issue that I am having is that the column is taking up all the space.
is there a way around this or another widget I should be using?
I tried using list view but it nothing ends up showing up
_displayJobTypeAlert(BuildContext context) {
return showDialog(
builder: (context) {
return AlertDialog(
title: Text('What type of job is this?'),
content: Column(
//shrinkWrap: true,
// ignore: prefer_const_literals_to_create_immutables
children: [
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Handyman');
},
child: const Text('Handyman'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Landscaping');
},
child: const Text('Landscaping'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Plumming');
},
child: const Text('Plumming'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Remodeling');
},
child: const Text('Remodeling'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Roofing');
},
child: const Text('Roofing'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Electrical');
},
child: const Text('Electrical'),
),
],
),
);
},
context: context,
);
}
Instruct the Column widget to take the minimum size it requires:
Column(
mainAxisSize: MainAxisSize.min,
children: [...]
)
I took out column
I used actions instead of children and it worked!
Future _displayJobTypeAlert(BuildContext context) {
return showDialog(
builder: (context) {
return AlertDialog(
elevation: 24.0,
title: Text('What type of job is this?'),
actions:
//Column(
//shrinkWrap: true,
// ignore: prefer_const_literals_to_create_immutables
//children:
[
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Handyman');
Navigator.pop(context);
},
child: const Text('Handyman'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Landscaping');
Navigator.pop(context);
},
child: const Text('Landscaping'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Plumming');
Navigator.pop(context);
},
child: const Text('Plumming'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Remodeling');
Navigator.pop(context);
},
child: const Text('Remodeling'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Roofing');
Navigator.pop(context);
},
child: const Text('Roofing'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Electrical');
Navigator.pop(context);
},
child: const Text('Electrical'),
),
],
//),
);
},
context: context,
);
}
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(),
),
);
},
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.
I keep seeing lot of white space if I do landscape or portrait within my image. I do need the slidable so didn't want to tweak the code too much, but I do want it to look representable
is there something wrong with my code?
I did add a picture this is happening in both landscape and portrait mode
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text(
"1 Alif-laam-meem آلم, Pg2",
style: new TextStyle(color: styling.appBarTextcolor),
),
leading: new IconButton(
icon: new Icon(styling.appBarBackArrowIcon),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NavDrawer(),
));
})),
body: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Stack(children: <Widget>[
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: styling.sizeofenglishandforward,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: new Container(
child: new Image.asset(
"test/assets/Para 1 - Alif-laam-meem no color/quranpg2-1.png",
// fit: BoxFit.fitidth,
fit: BoxFit.cover,
),
),
),
actions: <Widget>[
new IconSlideAction(
caption: styling.englishIconText,
color: styling.englishIconColorstripe,
icon: styling.englishIcon,
foregroundColor: styling.englishIconColor,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Changepg2topg2Color()),
);
}),
new IconSlideAction(
caption: styling.forwardIconText,
color: styling.forwardIconColorstripe,
icon: styling.forwardIcon,
foregroundColor: styling.forwardIconColor,
// onTap: () {
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => Changepg2topg3()),
// );
// }
),
// ),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: styling.backIconText,
color: styling.backIconColorstripe,
icon: styling.backIcon,
foregroundColor: styling.backIconColor,
// onTap: () => _showSnackBar('More'),
),
new IconSlideAction(
caption: styling.arabicIconText,
color: styling.arabicIconColorstripe,
icon: styling.arabicIcon,
foregroundColor: styling.arabicIconColor,
// onTap: () =>
),
],
),
]));
}));
}
}
SafeArea is preventing your image to go at some restricted areas of screen like, underneath the notch area. Or for some devices there are NavigationKeys in the bottom of screen. Try removing these
Cheers :)
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
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"),
),
],
);
},
);
},