How can I create a AlertDialog by clicking/tapping on ListTile.
Currently I'm doing this and nothing happens when it's clicked.
body: ListView(
children: <Widget>[
ListTile(
title: Text('Theme'),
onTap: (){
AlertDialog(
title: Text('Hi'),
);
},
)
],
),
PS: I'm a noob, please go easy on me.
you are very close, you created the dialog, just need to show it:
body: ListView(
children: <Widget>[
ListTile(
title: Text('Theme'),
onTap: () {
AlertDialog alert = AlertDialog(
title: Text('Hi'),
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
},
)
],
),
Change your ListTile with this.
ListTile(
title: Text('Theme'),
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Alert Dialog Example'),
content: Text('Alert Dialog Body Goes Here ..'),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('OK')),
],
);
});
},
)
I have also added some properties to use the AlertDialog(), like title, content and actions
Related
I have an AlertDialog that I want to have hyperlinks within the text. This is what I have currently:
await showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) => AgreementDialog());
// AgreementDialog.dart
build(BuildContext context) {
return StreamBuilder(
stream: agreementBloc.agreements,
builder:
(BuildContext context, AsyncSnapshot<AgreementDocuments> snapshot) {
if (snapshot.hasError) {
SnackBars.errorSnackBar(context, snapshot.error.toString());
return Spinner();
}
if (!snapshot.hasData) {
return Spinner();
}
return AlertDialog(
title: Text('Wait'),
content: Text('test tes test'),
actions: <Widget>[
TextButton(
child: Text('Approve'),
onPressed: () => Navigator.of(context).pop()),
],
);
});
}
The above works and will render 'test tes test', but now when I try to use the solution here I can't see the content text at all. Here is what I've tried:
return AlertDialog(
title: Text('One second...'),
content: RichText(
text: TextSpan(children: [
TextSpan(text: 'By clicking Agree, I hereby agree to the '),
TextSpan(text: 'Blah blah blah'),
]),
),
actions: <Widget>[
TextButton(
child: Text('Approve'),
onPressed: () => Navigator.of(context).pop()),
],
);
but it ends up blank:
Does anyone know what I'm doing wrong?
This is gonna be really dumb but I also don't know why my app was doing this...
The color was white so it blended in. I have to set my TextSpan to a color other than white.
🙃
what is this overlap widget ? or is this some kind of effect ? please
Use this function on button click:
void _settingModalBottomSheet(BuildContext context){
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.music_note),
title: new Text('Music'),
onTap: () => {}
),
new ListTile(
leading: new Icon(Icons.videocam),
title: new Text('Video'),
onTap: () => {},
),
],
),
);
});
}
It's called ModalBottomSheet, You can use this package to create powerful modal bottom sheets.
I've got an AlertDialog() that it's barrierDismissible has been set to false. But yet when user presses the back button on android device the AlertDialog closes. How can I compeletly prevent the user from closing the AlertDialog()?
Here's what I've done so far:
return showDialog<bool>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Title'),
content: Text('This is the alert dialog content'),
actions: <Widget>[
FlatButton(
child: Text('ok'),
onPressed: () {
Navigator.of(context).pop();
print('ok you win');
},
),
],
);
},
);
Try this way use WillPopScope() to handle onBackPressed() event
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return WillPopScope(
onWillPop: () {return Future.value(false);},
child: return AlertDialog(
title: Text('Title'),
content: Text('This is the alert dialog content'),
actions: <Widget>[
FlatButton(
child: Text('ok'),
onPressed: () {
Navigator.of(context).pop();
print('ok you win');
},
),
],
),
);
});
You can use the WillPopScope as a parent of the AlertDialog
showDialog(context: context,builder: (BuildContext context)
{
return WillPopScope(
onWillPop: () async =>false,
child: AlertDialog(
title: Text('Title'),
content: Text('Sample'),
actions: <Widget>[
FlatButton(
child: Text('ok'),
onPressed: (){
Navigator.of(context).pop();
},
)
],
),
);
So this is what I got so far. Basically, I want to display the card once the user taps on the FAB. Now, when I tap on the FAB, there's no response.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.exit_to_app),
onPressed: () => logoutUser().then((value) =>
Navigator.of(context).pushReplacementNamed('/SignIn')),
)
],
title: Text('TODO'),
),
body: Container(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: () => displayCard()),
);
}
Widget displayCard() {
return Center(
child: Card(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
],
),
),
);
}
Right now, you're returning a Widget to your onPressed function, which is a VoidCallBack. It won't do anything with the Widget it receives back from displayCard().
Consider using a Dialog popup. Replace your widget displayCard() with something like the following.
void displayCard(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("The Enchanted Nightingale"),
content: Text("Music by Julie Gable. Lyrics by Sidney Stein."),
actions: <Widget>[
FlatButton(
child: Text("Dismiss"),
onPressed: () {
//remove the dialog popup
Navigator.of(context).pop();
}
)
]
);
}
);
}
Then, update your floatActionButton code to pass context as a parameter
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: () => displayCard(context)),
I'm developing a Flutter App and in this app, there are some Dialogs. In these dialogs, there is only a Text; but when the text is too long, I can't scroll the text.
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => AlertDialog(
title: Text(title),
content: Text(description),
actions: < Widget > [
FlatButton(
child: Text("PLAY"),
onPressed: () {
_launchURL(link);
},
)
],
)
);
You can use ListBody inside SingleChildScrollView for this use case.
Here you go:
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => AlertDialog(
title: Text(title),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(description)
],
),
),
actions: < Widget > [
FlatButton(
child: Text("PLAY"),
onPressed: () {
_launchURL(link);
},
)
],
)
);