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);
},
)
],
)
);
Related
How can I to close all the showDialogs in my aplication? in this case _mostrarDialogConfirmacion is the dialog where i request to the user a confirmation to make a query, cargandoDialog is another dialog where i show a loading message while the query is executing, when the query finish, i want to close the two dialogs and only see the _mostrarDialogMensaje dialog
_mostrarDialogConfirmacion(
mensaje,
BuildContext context,
codLink,
motivo,
) {
return showDialog(
context: context,
builder: (context){
return AlertDialog(
title: const Text(
'Informacion',
textAlign: TextAlign.center,
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget> [
Text(mensaje, textAlign: TextAlign.center),
],
),
actions: <Widget> [
TextButton(
onPressed: () async {
Navigator.of(context).pop();
cargandoDialog(context);
List<dynamic> ingresarReclamo1 = await ingresarReclamo
.ingresarReclamo(codLink, titular, motivo);
// ignore: use_build_context_synchronously
Navigator.of(context).pop();
// ignore: use_build_context_synchronously
_mostrarDialogMensaje(
ingresarReclamo1[0].observaciones,
ingresarReclamo1[0].validado,
context,
);
},
child: const Text('Si')
),
TextButton(
onPressed: ()=> Navigator.of(context).pop(),
child: const Text('No')
),
],
);
}
);
}
you will dismiss first dialog and then you can use whenComplete to dismiss the second dialog
showDialog(
.....
).whenComplete(() => Navigator.of(context).pop())
You can return bool while .pop(boolValue) to check the tap button. Also, the showDialog is a future method, you can use await until it finished and then processed to next dialog. Navigator.of(context).pop() will be used to close recent dialog on this case. As for my understanding about the question, try this example code.
_mostrarDialogConfirmacion(mensaje, BuildContext context, codLink, motivo) {
return showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
title: const Text('Informacion', textAlign: TextAlign.center),
content: Column(
mainAxisSize: MainAxisSize.min,
),
actions: <Widget>[
TextButton(
onPressed: () async {
// Navigator.of(context)
// .pop(); //if you like to close previous one before showing the next dialog
final bool isSi = await showDialog(
barrierDismissible: false,
builder: (context) => AlertDialog(
content: Text("Second Dialog"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: const Text('Si')),
TextButton(
onPressed: () =>
Navigator.of(context).pop(false),
child: const Text('No')),
],
),
context: context);
if (mounted && isSi) {
Navigator.of(context).pop();
await showDialog(
builder: (context) => AlertDialog(
content: Text("_mostrarDialogMensaje")),
context: context);
}
},
child: const Text('Si')),
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('No')),
],
);
});
}
I'm using PopupMenuButton in my application. I want to showDialog on tapping a PopupMenuItem.
My PopupMenuItem:
PopupMenuItem(
child: Text("Show dialog"),
onTap: () {
showDialog(
context: context,
barrierColor: Colors.black26,
builder: (context) => AlertDialog(
...
)
},
),
Also using onSelected inside the PopupMenuButton didn't work.
Thats because onTap of popupMenuItem tries to use Navigator.pop to close the popup but at same time you are trying to show the dialog, So it closes the dialog and leaves the popup so, you can wait till the all the animations or ongoing things complete then show dialog
code: dartPad code
PopupMenuItem(
child: const Text('Item 0'),
onTap: () {
WidgetsBinding?.instance?.addPostFrameCallback((_) {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: const Icon(CupertinoIcons.info_circle),
content: const Text(
'Hello User, Welcome',
textAlign: TextAlign.center,
),
actions: [
CupertinoDialogAction(
isDefaultAction: true,
onPressed: () => Navigator.pop(context),
child: const Text('Thanks'),
),
],
);
});
});
}),
Try this one:
PopupMenuItem(
child: Text("Show dialog"),
onTap: () {
Future<void>.delayed(
const Duration(), // OR const Duration(milliseconds: 500),
() => showDialog(
context: context,
barrierColor: Colors.black26,
builder: (context) => AlertDialog(...),
),
),
},
);
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.
🙃
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();
},
)
],
),
);
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