I tried implementing the CupertinoAlertDialog (https://api.flutter.dev/flutter/cupertino/CupertinoAlertDialog-class.html) but when I used it, it looked like this:
which is quite different from how it looks when signing in with google or as shown in the image here (https://flutter.dev/docs/development/ui/widgets/cupertino)
Here's the code:
showDialog(
context: context,
barrierDismissible: true,
builder: (_) => _buildAlertDialog());
Widget _buildAlertDialog() {
return CupertinoAlertDialog(
title: Text(
'\"Abc\" Wants to Use \"xyz.com\" to Sign In',
),
content: Text(
'This allows the app and website to share information about you.',
),
actions: <Widget>[
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () {
// Drop the dialog
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: Text('Continue'),
onPressed: () {
// Drop the dialog
Navigator.pop(context);
// handle continue press
},
),
],
);
}
I tested your Code. I get the same result.
After some digging I found this : https://issue.life/questions/57676581
Looks like the backgroundColor is hardcoded. Not sure why that would be, or why it looks different to how it should.
I also found this: Flutter change dialog background color But I couldn't make any of those answers work in this case. Maybe you can though.
If nothing else works, you'll have to write your own Dialog widget. Good luck!
Related
I'm building an app for fire tv/fire stick using flutter.
My requirement: Show a dialog on press of a button in the fire TV remote and hide the dialog when the user presses the back button on the remote.
What I have accomplished: I'm able to show the dialog on the press of a button on the remote.
I need help in dismissing the dialog when the user presses back button on the remote.
What is happening now: When I press back while the dialog is shown, the entire page gets rerouted to the previous page.
I'm guessing it has something to do with the context, not sure how to fix this issue.
_showInfoModal(context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.transparent,
content: Container(
child: Center(
child: Text(widget.message, style: TextStyle(color: Colors.white)),
),
)
);
},
);
}
This is the code I'm using to show the dialog.
Navigator.of(context, rootNavigator: true).pop();
This is how I'm trying to pop the alert dialog.
Can someone please help me out here? TIA.
Try below code hope its works because I also build apk for TV and use below Alert Code
showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Top '),
content: Text('Bottom '),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('Ok'),
),
],
);
},
);
}
So I was able to accomplish this using a workaround.
Having a boolean variable and showing either the dialog or a container with 0 height.
Not a good approach but gets the work done.
How can I download an image from flutter web?
The image is not clickable/dragable and shows no context menu on right click, for example to "save as".
Web implementation - http://watools.xyz/ankush_apis/flutter_projects/youtube/#/
Is there an alternative Image widget, to make it web clickable?
Like Text and SelectableText.
Maybe an Property, a pub package?
Any answers appreciated.
Did you try to use the InkWell widget? It supports gesture and already implements the clickable effect.
InkWell(
child: Image.network(
'https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI'),
onTap: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Options'),
actions: [
TextButton(
child: Text('Save image'),
onPressed: () {
//Code for download the image
},
),
],
),
);
},
),
I am developing an app that mainly just displays information from a web service to the user (info created by their admin). On the Drawer Menu there are 5 screens to display different information.
After the user has logged in, I use Navigator to move between screens by using pushReplacement. Meaning the current screen is always at the bottom of the screen stack. If the user presses the back button on their device, the app exists immediately.
How can I catch this, so I can ask the user if they want to log out, and then display the login screen?
Thanks for any suggestions.
Cheers,
Paul
You can do this with the WillPopScope widget and changing the onWillPop parameter. The example I posted does something similar to what you want as it shows an alert dialog that can determine what will happen next. The FlatButton onPressed code probably isn't exactly what you're looking for and you'll have to handle that according to your implementation This is the example code is from #AironTark answer to this related question.
#override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(...),
onWillPop: () => showDialog<bool>(
context: context,
builder: (c) => AlertDialog(
title: Text('Warning'),
content: Text('Do you really want to exit'),
actions: [
FlatButton(
child: Text('Yes'),
onPressed: () => Navigator.pop(c, true),
),
FlatButton(
child: Text('No'),
onPressed: () => Navigator.pop(c, false),
),
],
),
),
);
}
I want to make simple quiz app in flutter. I will save all questions in class. And, then I will use conditional statement to check if a question is correct.
print (check)icon on screen else print (close).
When questions end, I want to print AlertDialog which says that the quiz question has ended. And, then reset the quiz.
How can I do this?
You can show AlertDialog at end of questions, that after navigate to home page. like this:
await showDialog(
context: this.context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('AlertDialog Title'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('This is a demo alert dialog.'),
Text('Would you like to approve of this message?'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Approve'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
Navigator.of(context).pop(); // this line navigate to prevues page(like home)
in android, when you tap on the "barrier"/outside/background of a (material) modal dialog created using showDialog(), the dialog closes by default.
when you tap on that barrier on an iphone (physical device), the tap to close is ignored and the modal stays open.
i realize there is a "showCupertinoDialog" option, but i am trying to avoid using it (it doesn't tap-barrier-to-close either).
the flutter/dart documentation doesn't indicate any differences in expected behavior of android -vs- ios. i've included some example code that illustrates the issue, i would expect the _showMaterialDialog() dialog to close on iphones, but it does not.
any idea why this is not working? is this a bug or expected behavior? Thanks!
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class dialogtest extends StatefulWidget {
#override
dialogtestState createState() => dialogtestState();
}
class dialogtestState extends State<dialogtest> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Dialog Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_showMaterialDialog();
},
child: Text('Show Material Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showCupertinoDialog();
},
child: Text('Show Cupertino Dialog'),
),
],
),
)));
}
void _showMaterialDialog() {
showDialog(
context: context,
barrierDismissible: true, // ********* ignored in ios, defaults to true anyway!!
builder: (context) {
return AlertDialog(
title: Text('Material Dialog'),
content: Text('This is the content of the material dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
_dismissDialog() {
Navigator.pop(context);
}
void _showCupertinoDialog() {
showDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('Cupertino Dialog'),
content: Text('This is the content of the cupertino dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
}
i figured it out in case anyone runs into this behavior randomly.
i was using flutter 1.7 (and working with android only) when I created the project. in order to support "unfocusing" of a text field when tapping outside of it, i wrapped the whole project in a GestureDetector with the instructions from here:
https://flutter360.dev/dismiss-keyboard-form-lose-focus
Everything worked perfectly. When I moved the app to a mac for iOS testing, i did a new install of flutter which came with v1.9.1+hotfix.6. I guess something in flutter changed from 1.7 -> 1.9.1 which breaks this unsupported implementation. not considering the difference between my windows/android flutter version (where it worked) to my mac/ios version (where it did not work), i assumed it was an iOS thing. Once I upgraded flutter on my PC to 1.9.1 the dialogs were no longer dismissible on my android phone.
I still need/want a way to tap-to-dismiss the keyboard from a text field. I am trying out the Listener solution from here which seems to be working as expected so far:
Flutter. A way for TextField to detect tap outside
I guess this is an exercise in side-effects of creative solutions to functionality not provided out of box by the framework coupled with understanding the impacts of updating the framework.