How to make an AlertDialog in Flutter? - dart

I am learning to build apps in Flutter. Now I have come to alert dialogs. I have done them before in Android and iOS, but how do I make an alert in Flutter?
Here are some related SO questions:
How to style AlertDialog Actions in Flutter
adding dropdown menu in alert dialog box in flutter
Show alert dialog on app main screen load automatically
how to refresh alertdialog in flutter
Alert Dialog with Rounded corners in flutter
I'd like to make a more general canonical Q&A so my answer is below.

One Button
showAlertDialog(BuildContext context) {
// set up the button
Widget okButton = TextButton(
child: Text("OK"),
onPressed: () { },
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("My title"),
content: Text("This is my message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
Two Buttons
showAlertDialog(BuildContext context) {
// set up the buttons
Widget cancelButton = TextButton(
child: Text("Cancel"),
onPressed: () {},
);
Widget continueButton = TextButton(
child: Text("Continue"),
onPressed: () {},
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("AlertDialog"),
content: Text("Would you like to continue learning how to use Flutter alerts?"),
actions: [
cancelButton,
continueButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
Three Buttons
showAlertDialog(BuildContext context) {
// set up the buttons
Widget remindButton = TextButton(
child: Text("Remind me later"),
onPressed: () {},
);
Widget cancelButton = TextButton(
child: Text("Cancel"),
onPressed: () {},
);
Widget launchButton = TextButton(
child: Text("Launch missile"),
onPressed: () {},
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Notice"),
content: Text("Launching this missile will destroy the entire universe. Is this what you intended to do?"),
actions: [
remindButton,
cancelButton,
launchButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
Handling button presses
The onPressed callback for the buttons in the examples above were empty, but you could add something like this:
Widget launchButton = TextButton(
child: Text("Launch missile"),
onPressed: () {
Navigator.of(context).pop(); // dismiss dialog
launchMissile();
},
);
If you make the callback null, then the button will be disabled.
onPressed: null,
Supplemental code
Here is the code for main.dart in case you weren't getting the functions above to run.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: MyLayout()),
);
}
}
class MyLayout extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
child: Text('Show alert'),
onPressed: () {
showAlertDialog(context);
},
),
);
}
}
// replace this function with the examples above
showAlertDialog(BuildContext context) { ... }

I used similar approach, but I wanted to
Keep the Dialog code as a widget in a separated file so I can reuse it.
Blurr the background when the dialog is shown.
Code:
1. alertDialog_widget.dart
import 'dart:ui';
import 'package:flutter/material.dart';
class BlurryDialog extends StatelessWidget {
String title;
String content;
VoidCallback continueCallBack;
BlurryDialog(this.title, this.content, this.continueCallBack);
TextStyle textStyle = TextStyle (color: Colors.black);
#override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: AlertDialog(
title: new Text(title,style: textStyle,),
content: new Text(content, style: textStyle,),
actions: <Widget>[
new FlatButton(
child: new Text("Continue"),
onPressed: () {
continueCallBack();
},
),
new FlatButton(
child: Text("Cancel"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
));
}
}
You can call this in main (or wherever you want) by creating a new method like:
_showDialog(BuildContext context)
{
VoidCallback continueCallBack = () => {
Navigator.of(context).pop(),
// code on continue comes here
};
BlurryDialog alert = BlurryDialog("Abort","Are you sure you want to abort this operation?",continueCallBack);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}

You can use this code snippet for creating a two buttoned Alert box,
import 'package:flutter/material.dart';
class BaseAlertDialog extends StatelessWidget {
//When creating please recheck 'context' if there is an error!
Color _color = Color.fromARGB(220, 117, 218 ,255);
String _title;
String _content;
String _yes;
String _no;
Function _yesOnPressed;
Function _noOnPressed;
BaseAlertDialog({String title, String content, Function yesOnPressed, Function noOnPressed, String yes = "Yes", String no = "No"}){
this._title = title;
this._content = content;
this._yesOnPressed = yesOnPressed;
this._noOnPressed = noOnPressed;
this._yes = yes;
this._no = no;
}
#override
Widget build(BuildContext context) {
return AlertDialog(
title: new Text(this._title),
content: new Text(this._content),
backgroundColor: this._color,
shape:
RoundedRectangleBorder(borderRadius: new BorderRadius.circular(15)),
actions: <Widget>[
new FlatButton(
child: new Text(this._yes),
textColor: Colors.greenAccent,
onPressed: () {
this._yesOnPressed();
},
),
new FlatButton(
child: Text(this._no),
textColor: Colors.redAccent,
onPressed: () {
this._noOnPressed();
},
),
],
);
}
}
To show the dialog you can have a method that calls it NB after importing BaseAlertDialog class
_confirmRegister() {
var baseDialog = BaseAlertDialog(
title: "Confirm Registration",
content: "I Agree that the information provided is correct",
yesOnPressed: () {},
noOnPressed: () {},
yes: "Agree",
no: "Cancel");
showDialog(context: context, builder: (BuildContext context) => baseDialog);
}
OUTPUT WILL BE LIKE THIS

Here is a shorter, but complete code.
If you need a dialog with only one button:
await showDialog(
context: context,
builder: (context) => new AlertDialog(
title: new Text('Message'),
content: Text(
'Your file is saved.'),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context, rootNavigator: true)
.pop(); // dismisses only the dialog and returns nothing
},
child: new Text('OK'),
),
],
),
);
If you need a dialog with Yes/No buttons:
onPressed: () async {
bool result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Confirmation'),
content: Text('Do you want to save?'),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context, rootNavigator: true)
.pop(false); // dismisses only the dialog and returns false
},
child: Text('No'),
),
FlatButton(
onPressed: () {
Navigator.of(context, rootNavigator: true)
.pop(true); // dismisses only the dialog and returns true
},
child: Text('Yes'),
),
],
);
},
);
if (result) {
if (missingvalue) {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text('Missing Value'),
));
} else {
saveObject();
Navigator.of(context).pop(_myObject); // dismisses the entire widget
}
} else {
Navigator.of(context).pop(_myObject); // dismisses the entire widget
}
}

Simply used this custom dialog class which field you not needed to leave it or make it null so this customization you got easily.
import 'package:flutter/material.dart';
class CustomAlertDialog extends StatelessWidget {
final Color bgColor;
final String title;
final String message;
final String positiveBtnText;
final String negativeBtnText;
final Function onPostivePressed;
final Function onNegativePressed;
final double circularBorderRadius;
CustomAlertDialog({
this.title,
this.message,
this.circularBorderRadius = 15.0,
this.bgColor = Colors.white,
this.positiveBtnText,
this.negativeBtnText,
this.onPostivePressed,
this.onNegativePressed,
}) : assert(bgColor != null),
assert(circularBorderRadius != null);
#override
Widget build(BuildContext context) {
return AlertDialog(
title: title != null ? Text(title) : null,
content: message != null ? Text(message) : null,
backgroundColor: bgColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(circularBorderRadius)),
actions: <Widget>[
negativeBtnText != null
? FlatButton(
child: Text(negativeBtnText),
textColor: Theme.of(context).accentColor,
onPressed: () {
Navigator.of(context).pop();
if (onNegativePressed != null) {
onNegativePressed();
}
},
)
: null,
positiveBtnText != null
? FlatButton(
child: Text(positiveBtnText),
textColor: Theme.of(context).accentColor,
onPressed: () {
if (onPostivePressed != null) {
onPostivePressed();
}
},
)
: null,
],
);
}
}
Usage:
var dialog = CustomAlertDialog(
title: "Logout",
message: "Are you sure, do you want to logout?",
onPostivePressed: () {},
positiveBtnText: 'Yes',
negativeBtnText: 'No');
showDialog(
context: context,
builder: (BuildContext context) => dialog);
Output:

Or you can use RFlutter Alert library for that. It is easily customizable and easy-to-use. Its default style includes rounded corners and you can add buttons as much as you want.
Basic Alert:
Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();
Alert with Button:
Alert(
context: context,
type: AlertType.error,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
)
],
).show();
You can also define generic alert styles.
*I'm one of developer of RFlutter Alert.

Minumum code for alert dialog
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('Title'),
content: Text(
'Content widget',
),
),
);

If you want beautiful and responsive alert dialog then you can use flutter packages like
rflutter alert ,fancy dialog,rich alert,sweet alert dialogs,easy dialog & easy alert
These alerts are good looking and responsive. Among them rflutter alert is the best. currently I am using rflutter alert for my apps.

showAlertDialog(BuildContext context, String message, String heading,
String buttonAcceptTitle, String buttonCancelTitle) {
// set up the buttons
Widget cancelButton = FlatButton(
child: Text(buttonCancelTitle),
onPressed: () {},
);
Widget continueButton = FlatButton(
child: Text(buttonAcceptTitle),
onPressed: () {
},
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text(heading),
content: Text(message),
actions: [
cancelButton,
continueButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
called like:
showAlertDialog(context, 'Are you sure you want to delete?', "AppName" , "Ok", "Cancel");

Check out Flutter Dropdown Banner to easily alert users of events and prompt action without having to manage the complexity of presenting, delaying, and dismissing the component.
To set it up:
import 'packages:dropdown_banner/dropdown_banner.dart';
...
class MainApp extends StatelessWidget {
...
#override
Widget build(BuildContext context) {
final navigatorKey = GlobalKey<NavigatorState>();
...
return MaterialApp(
...
home: DropdownBanner(
child: Scaffold(...),
navigatorKey: navigatorKey,
),
);
}
}
To use it:
import 'packages:dropdown_banner/dropdown_banner.dart';
...
class SomeClass {
...
void doSomethingThenFail() {
DropdownBanner.showBanner(
text: 'Failed to complete network request',
color: Colors.red,
textStyle: TextStyle(color: Colors.white),
);
}
}
Click here to see an example

Just to add to the great answers - the best package I found is:
adaptive_dialog: ^1.8.0+1
For a one OK button the best thing I found is using showOkAlertDialog
Implementation:
import 'package:adaptive_dialog/adaptive_dialog.dart';
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
return Container(
child: Center(
child: IconButton(
icon: Icon(
Icons.info,
),
onPressed: () => showOkAlertDialog(
context: context,
okLabel: 'OK',
title: 'Title',
message: 'This is the message',
),
)),
);
}
Clean and dismisses when you click 'Ok'.

If you need a dialog so this code for you. just use showDialog() onPress or any inside a function.
void showDialog() {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: const Text("Login Failed!"),
content: const Text(
"Invalid credential !! Please check your email or password",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Container(
child: const Text(
"Try again",
style: TextStyle(color: Colors.cyan, fontSize: 17),
),
),
),
],
),
)}
Demo dialog screenshots
hope its helpful๐Ÿ˜Š๐Ÿ˜Š๐Ÿ˜Š

Simple and working solution that I used: Enjoy
// Sample can be used for exit dialog box on apps
showAlertDialog(BuildContext context) {
Widget okButton = TextButton(
child: const Text("Leave now",style: TextStyle(color: Colors.red),),
onPressed: () { SystemNavigator.pop(); },
);
Widget nopeButton = TextButton(
child: const Text("Stay here"),
onPressed: () { Navigator.pop(context); },
);
AlertDialog alert = AlertDialog(
title: const Text("Leave"),
content: const Text("Are you sure you want to leave?"),
actions: [
nopeButton,
okButton,
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}

Another easy option to show Dialog is to use stacked_services package
_dialogService.showDialog(
title: "Title",
description: "Dialog message Tex",
);
});

This code works and demonstrates how to obtain the button value pressed by the user:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: MyStatelessWidget(),
),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
// set up the buttons
Widget cancelButton = TextButton(
child: Text("Cancel"),
onPressed: () => Navigator.pop(context, 'Cancel'),
);
Widget continueButton = TextButton(
child: Text("Ok"),
onPressed: () => Navigator.pop(context, 'Ok'),
);
showDialog<String>(
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Text('AlertDialog Title'),
content: const Text('AlertDialog description'),
actions: <Widget>[
cancelButton,
continueButton,
],
),
).then((value) => print(value));
},
child: const Text('Show Dialog'),
);
}
}
Pressing on Ok button. then on Cancel button print

`showDialog<String>(
context: context,
builder: (BuildContext context) =>
AlertDialog(
title: const Text(
'Invalid Password',
style: TextStyle(color: Colors.red),
),
content:
const Text('Create Strong Password'),
actions: <Widget>[
Center(
child: TextButton(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors
.red, // Background Color
),
onPressed: () => Navigator.pop(
context, 'Cancel'),
child: const Text('Cancel'),
),
),
],
),
),`

Related

Flutter: how to remove the white background behind the keyboard when keyboard got activated

I have a flutter app and I do experience a strange behaviour when the keyboard get activated in my iPhone. As you can see from the picture below there is a white background which appears under the keyboard while it is popping up...
Does anyone know how to set that background color???
EDIT:
Thanks for the suggestion to use resizeToAvoidBottomPadding. That command is deprecated and I have replaced with resizeToAvoidBottomInset: false. This has resolved the issue (yup!) and there is no more white background under the keyboard BUT it has created another strange effect. There is now a dark-blue bar above the keyboard. Check the next image... I have set an orange background color so you can see it better. You can also see that the floating button is shifted up which means the dark-blu bar is now between the keyboard and the scaffold. Do you know how I can get rid of that bar? this seems to be worst Thant the white background since it is taking precious screen space..
For reference the scaffold is nested in a CupertinoTabScaffold
Here is the most relevant part of my code
void main() async {
Crashlytics.instance.enableInDevMode = true;
FlutterError.onError = Crashlytics.instance.recordFlutterError;
runApp(ChangeNotifierProvider<Data>(
builder: (context) => Data(),
child: new CupertinoApp(
theme: CupertinoThemeData(
barBackgroundColor: kColorPrimary,
primaryColor:
kColorText,
textTheme: CupertinoTextThemeData(
primaryColor:
kColorText,
navLargeTitleTextStyle: TextStyle(
fontWeight: FontWeight.bold, fontSize: 70.0, color: kColorText),
),
),
home: new CheckIfFirstTime(),
),
));
}
class CheckIfFirstTime extends StatefulWidget {
#override
_CheckIfFirstTimeState createState() => _CheckIfFirstTimeState();
}
class _CheckIfFirstTimeState extends State<CheckIfFirstTime> {
Future checkFirstSeen() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
bool _seen = (prefs.getBool('seen') ?? false);
if (_seen) {
Navigator.of(context).pushReplacement(
new MaterialPageRoute(builder: (context) => new HomeScreen()));
}
}
#override
void initState() {
super.initState();
checkFirstSeen();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kColorPrimary,
body: Text(
'loading...',
style: kSendButtonTextStyle,
),
);
}
}
class HomeScreen extends StatefulWidget {
static const String id = 'home';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int currentIndex = 0;
void confirmPlatform() {
if (Platform.isIOS)
appData.isIOS = true;
else
appData.isIOS = false;
}
#override
void initState() {
// TODO: implement initState
super.initState();
confirmPlatform();
}
#override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
resizeToAvoidBottomInset: false,
tabBar: CupertinoTabBar(
backgroundColor: kColorPrimaryLight,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Discover', style: TextStyle(fontFamily: kFontFamily)),
),
BottomNavigationBarItem(
icon: Badge(
showBadge: Provider.of<Data>(context).filterCounter == 0
? false
: true,
badgeContent: Text(
Provider.of<Data>(context).filterCounter.toString(),
style: TextStyle(color: kColorText),
),
child: Icon(Icons.filter_list)),
title: Text('Filters', style: TextStyle(fontFamily: kFontFamily)),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('Me', style: TextStyle(fontFamily: kFontFamily)),
),
BottomNavigationBarItem(
icon: Icon(Icons.assignment),
title: Text('Stories', style: TextStyle(fontFamily: kFontFamily)),
),
//with badge
BottomNavigationBarItem(
icon: Badge(
showBadge: Provider.of<Data>(context).basketCounter == '0'
? false
: true,
badgeContent: Text(
Provider.of<Data>(context).basketCounter,
style: TextStyle(color: kColorText),
),
child: Icon(Icons.shopping_cart)),
title: Text('Basket', style: TextStyle(fontFamily: kFontFamily)),
),
],
),
tabBuilder: (context, index) {
if (index == 0) {
return CupertinoTabView(
navigatorKey: firstTabNavKey,
builder: (BuildContext context) => DiscoverScreenFinal(),
);
} else if (index == 1) {
return CupertinoTabView(
navigatorKey: secondTabNavKey,
builder: (BuildContext context) => FilterScreen(),
);
} else if (index == 2) {
return CupertinoTabView(
navigatorKey: thirdTabNavKey,
builder: (BuildContext context) => WelcomeScreen(),
);
} else if (index == 3) {
return CupertinoTabView(
navigatorKey: forthTabNavKey,
builder: (BuildContext context) => Stories(),
);
}
{
return CupertinoTabView(
navigatorKey: fifthTabNavKey,
builder: (BuildContext context) => Basket(),
);
}
},
);
}
}
class DiscoverScreenFinal extends StatefulWidget {
#override
_DiscoverScreenFinalState createState() => _DiscoverScreenFinalState();
}
class _DiscoverScreenFinalState extends State<DiscoverScreenFinal> {
#override
Widget build(BuildContext context) {
return TopBarAgnostic(
text: 'Discover',
style: kSendButtonTextStyle,
firstIcon: Icon(Icons.blur_on),
firstIconDestination: CameraApp(),
scannerOn: true,
secondtIcon: Icon(Icons.location_on),
secondIconDestination: MapPage(),
uniqueHeroTag: 'discover001a',
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: kColorPrimary,
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton.extended(
backgroundColor: kColorAccent,
onPressed: () {
//โ€ฆ
},
label: Text(
'To Favorites',
style: kDescriptionTextStyle.copyWith(
fontSize: kFontSizeSmall, fontWeight: FontWeight.bold),
),
icon: Icon(Icons.favorite),
),
body: Container()
),
);
}
}
You have to use this line in Scaffold, it will adjust your view automatically when keyboard is appear and disappear.
resizeToAvoidBottomPadding: false
You could set a backgroundColor to the Scaffold to replace that white background.
This happens because the body of the Scaffold gets resized when you open the keyboard. If you want to avoid the resizing you could set resizeToAvoidBottomInset: false to the Scaffold.
after flutter 2 use this in the Scaffold
resizeToAvoidBottomInset: false,
Best solution is creating a Stack widget with two children: a Container for the background (color, gradient, background image...) and a Scaffold for the app content.
Widget build(BuildContext context) {
return Stack(
children: [
Container(
decoration: /* ... Background styles ... */,
),
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
body: Container(
padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
child: SafeArea(bottom: false, child: /* ... App content ... */))
)
]);
}
Basically you can solve this problem by keeping Scaffold inside of Container, like this:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment(0.5, 0.3),
colors: [
Colors.red,
Colors.green,
],
),
),
child: Scaffold(/* ... rest of your code ... */)
)
if you are in develop app in java solve this by just adding android:windowSoftInputMode="adjustPan" in your activity present in the manifest file.
Thanks
you can use
child: Scaffold(
backgroundColor: Color(0xff53ccb2),

AlertDialog setstate in Function/OnTap

new to flutter. I know how to set state the alert dialog, but with the need of tap to function like ()=> _createPlayer, It does not want to rebuild the alert dialog.
I wonder how to set state on alert dialog when you need to tap them.
File _image;
GestureDetector(
onTap: () => _createPlayer(),
After tap, it will display an alert dialog like this:
_createPlayer() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
content: Container(
height: 400,
width: 300,
child: Column(
children: <Widget>[
Text('Create Player', style: Theme
.of(context)
.textTheme
.body1),
GestureDetector(
onTap: _getImageCamera,
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
backgroundImage: _image != null ? FileImage(_image) : AssetImage('assets/images/undercover.png'),
),
),
],
),
),
);
});
}
_getImageCamera() async{
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
I want to set state/change the image in alert dialog when selected. Any idea?
You can use StatefulBuilder for change inside dialog
showDialog(
context: context,
builder: (context) {
String contentText = "Content of Dialog";
// add StatefulBuilder to return value
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"),
),
],
);
},
);
},
);
Create a separate Stateful Widget CustomDialog for the AlertDialog and move the _getImageCamera function _image variable inside it like this
_createPlayer() {
return CustomDialog();
}
class CustomDialog extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return CustomDialogState();
}
}
class CustomDialogState extends State<CustomDialog> {
ImageProvider _image;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
content: Container(
height: 400,
width: 300,
child: Column(
children: <Widget>[
Text('Create Player', style: Theme
.of(context)
.textTheme
.body1),
GestureDetector(
onTap: _getImageCamera,
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
backgroundImage: _image != null ? FileImage(_image) : AssetImage('assets/images/undercover.png'),
),
),
],
),
),
);
});
}
_getImageCamera() async{
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
}
In order to see UI changes on showDialog, you have to create a new StatefulWidget and then work with dialog in that class. Here is the example/sample code
The most stupidest and quickest fix is:
Navigator.of(context).pop();
Then call the showDialog() again.
There will be a micro delay but works.

Flutter : Get AlertDialog From Another Dart File

i need help guys.
I have 2 dart file : main.dart and alertform.dart. some cases require using this method in my application.
I want to try accessing the alerdialog from alertform.dart on the button on main.dart. is that possible? this my code:
main.dart
import 'package:flutter/material.dart';
import 'alertform.dart';
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text('Test'),
),
body: new Column(
children: <Widget>[
RaisedButton(
child: new Text('Show Alert'),
onPressed: (){
CommentForm();
},
)
],
),
);
}
}
alertform.dart
import 'package:flutter/material.dart';
class AlertForm extends StatefulWidget {
#override
_AlertFormState createState() => _AlertFormState();
}
class _AlertFormState extends State<AlertForm> {
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
#override
Widget build(BuildContext context) {
return Container(
);
}
}
I don't know why you want to call this _dialog from outside class, where you can call inside your class. But if you want to do then you can try this code.
import 'package:flutter/material.dart';
import 'alertform.dart';
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text('Test'),
),
body: new Column(
children: <Widget>[
RaisedButton(
child: new Text('Show Alert'),
onPressed: (){
AlertFormState(context).showDialogBox;
},
)
],
),
);
}
}**
import 'package:flutter/material.dart';
class AlertForm extends StatefulWidget {
#override
AlertFormState createState() => AlertFormState();
}
class AlertFormState extends State<AlertForm> {
void showDialogBox(BuildContext context) {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
#override
Widget build(BuildContext context) {
return Container(
);
}
}
Create a new Class :
class AlertDemo{
void showDialog(BuildContext context) {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
}
And then call using the AlertDemo class instance call the showDialog Method.
RaisedButton(
child: new Text('Show Alert'),
onPressed: (){
AlertDemo().showDialog(context);
},
)
I havent tested this as i am travelling and wrote on mobile , so if it didnt worked i will edit the correct one when i reach.
It's simple.
main.dart
import 'package:flutter/material.dart';
import 'showdialog.dart';
void main() => runApp(MaterialApp(
home: HomePage(),
));
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child:
ElevatedButton(
child: Text("Show"),
onPressed: () {
showDialogBox(context);
}
),
);
}
}
showdialog.dart
import 'package:flutter/material.dart';
void showDialogBox(BuildContext context) {
showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text("title"),
content: new Text("body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("close"),
onPressed: () {
Navigator.of(context).pop();
},
)
]
);
}
);
}

How to make a full screen dialog in flutter?

I want to make a full screen dialog box. Dialog box background must be opaque.
Here is an example:
How to make like this in Flutter?
You can use the Navigator to push a semi-transparent ModalRoute:
import 'package:flutter/material.dart';
class TutorialOverlay extends ModalRoute<void> {
#override
Duration get transitionDuration => Duration(milliseconds: 500);
#override
bool get opaque => false;
#override
bool get barrierDismissible => false;
#override
Color get barrierColor => Colors.black.withOpacity(0.5);
#override
String get barrierLabel => null;
#override
bool get maintainState => true;
#override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
// This makes sure that text and other content follows the material style
return Material(
type: MaterialType.transparency,
// make sure that the overlay content is not cut off
child: SafeArea(
child: _buildOverlayContent(context),
),
);
}
Widget _buildOverlayContent(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'This is a nice overlay',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
)
],
),
);
}
#override
Widget buildTransitions(
BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
// You can add your own animations for the overlay content
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
}
// Example application:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Playground',
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
void _showOverlay(BuildContext context) {
Navigator.of(context).push(TutorialOverlay());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Test')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Center(
child: RaisedButton(
onPressed: () => _showOverlay(context),
child: Text('Show Overlay'),
),
),
),
);
}
}
Well here is my implementation which is quite straightforward.
from first screen
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) =>
RedeemConfirmationScreen()));
at 2nd screen
class RedeemConfirmationScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white.withOpacity(0.85), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
.....
);
}
}
and here are the results.
Screenshot (Flutter's native dialog)
Call this method to show the dialog in fullscreen.
showGeneralDialog(
context: context,
barrierColor: Colors.black12.withOpacity(0.6), // Background color
barrierDismissible: false,
barrierLabel: 'Dialog',
transitionDuration: Duration(milliseconds: 400),
pageBuilder: (_, __, ___) {
return Column(
children: <Widget>[
Expanded(
flex: 5,
child: SizedBox.expand(child: FlutterLogo()),
),
Expanded(
flex: 1,
child: SizedBox.expand(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
),
),
),
],
);
},
);
Note: This answer does not discuss making the modal transparent, but is an answer is for the stated question of "How to make a full screen dialog in flutter?". Hopefully this helps other that find this question through a search like I did, that don't need a transparent modal.
Create your modal dialog class:
class SomeDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Dialog Magic'),
),
body: new Text("It's a Dialog!"),
);
}
}
In the class that needs to open the dialog, add something like this:
void openDialog() {
Navigator.of(context).push(new MaterialPageRoute<Null>(
builder: (BuildContext context) {
return new SomeDialog();
},
fullscreenDialog: true));
}
If fullscreenDialog above is true, then the app bar will have an "x" close button. If false, it will have a "<-" back arrow.
If you need to get the result of a dialog action, add a button to your dialog that returns a value when popping the navigation stack. Something like this:
onPressed: () {
Navigator
.of(context)
.pop(new MyReturnObject("some value");
}
then in your class opening the dialog, do capture the results with something like this:
void openDialog() async {
MyReturnObject results = await Navigator.of(context).push(new MaterialPageRoute<MyReturnObject>(
builder: (BuildContext context) {
return new SomeDialog();
},
fullscreenDialog: true));
}
You can use showGeneralDialog method with any widget extends from Material like Scaffold, Card, ..etc.
For example I am going to it with Scaffold like this:
showGeneralDialog(
context: context,
pageBuilder: (context, animation, secondaryAnimation) => Scaffold(
backgroundColor: Colors.black87,
body: //Put your screen design here!
),
);
And now you can set your design as a normal screen by using Scaffold.
Note: if you want to go back you can Navigator like this:
Navigator.of(context).pop(null)
Different ways to show fullscreen dialog
A. Material Dialog
showDialog<void>(
context: context,
useSafeArea: false,
builder: (BuildContext context) {
return const SomeScaffoldView();
},
);
B. Cupertino Dialog
showCupertinoDialog<void>(
context: context,
builder: (BuildContext context) {
return const SomeScaffoldView();
},
);
C. Custom Dialog
Flutter uses this under-the-hood when displaying dialogs.
Can customize transition animation with transitionBuilder, here's a random guide with example animations.
showGeneralDialog(
context: context,
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return const SomeScaffoldView();
},
);
Sample Scaffold View used in above snippets.
class SomeScaffoldView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Fullscreen Dialog'),
),
body: const Center(child: Text('Dialog Body')),
);
}
}
You can use AlertDialog with zero insetPadding like below:
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
insetPadding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
content: SizedBox.expand(
child: Column(
children: <Widget>[
SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Wrap(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Text(
"Sample type",
style: TextStyle(fontWeight: FontWeight.w700),
),
),
Expanded(flex: 1, child: Text(""))
],
),
],
)),
],
),
));
});
},
);
RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.
Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();
RFlutter
It's easy to use! :)
you can do like this if you use popular flutter library getx
getx link
void showAlertDialogg(
String body,
String? confirmButtonText,
String? cancelButtonText,
Function(bool onConfirm, bool onCancel) clickEvent,
{barrierDismissible = false}) {
Get.dialog(
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextComponent(
body,
textAlign: TextAlign.center,
fontSize: textSmallFontSize,
fontWeight: titleFontWeight,
color: Colors.white,
),
Row(
//crossAxisAlignment : CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: OutlineButtonComponent(
text: cancelButtonText,
borderColor: kPrimaryColor,
onPressed: () {
Get.back();
clickEvent(false, true);
},
textColor: kPrimaryColor,
padding: EdgeInsets.fromLTRB(16, 16, 8, 16),
),
),
Expanded(
flex: 1,
child: ButtonComponent(
text: confirmButtonText,
buttonColor: kPrimaryColor,
onPressed: () {
Get.back();
clickEvent(true, false);
},
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(8, 16,16, 16),
),
),
],
)
],
),
barrierColor: Colors.black12.withOpacity(0.8),
useSafeArea: true
);
}
you can pas params as you want & call this method where you need it. it supports widget so you can setup the widget as you want.
Wrap your top-level widget with Navigator widget like so:
return Navigator(
pages: [
MaterialPage(
child: MainScreen(
child: widgets...
then call showDialog and because useRootNavigator is set to true in default it will use the root navigator that we added above the MainScreen

Bottom Navigation with Flutter

I try to build a App with flutter and have a problem by building the navigation. I want to have a navigation like in the current version of youtube app. A Bottom Navigation Bar with three Pages and than for each Page sub Pages with an owen navigation stack. On all subpages it shoud be possible to change the main view and the app shoud save on witch subpage i where. Is that possible? I found no solution for that. I think it shoud be possible because its on the example page of material Design: https://material.io/design/components/bottom-navigation.html#behavior at the Point "Bottom navigation actions".
I would be so thankful for help!
I'd take a look at this code snippet for help.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:my_nit2018/navigarion_drawer.dart';
import 'package:my_nit2018/pages/app/blog/blog_page.dart';
import 'package:my_nit2018/pages/app/home/home_page.dart';
import 'package:my_nit2018/pages/app/library/library_page.dart';
import 'package:my_nit2018/pages/app/notifications/notifications_page.dart';
class MainApp extends StatefulWidget {
FirebaseUser user;
MainApp(this.user);
#override
_MainAppState createState() => new _MainAppState();
}
class _MainAppState extends State<MainApp> {
int i = 0;
var pages = [
new HomePage(),
new BlogPage(),
new LibraryPage(),
new NotificationsPage()
];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: pages[i],
drawer: new AppNavigationDrawer(),
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.photo_library),
title: new Text('Blog'),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.book),
title: new Text('Library'),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.notifications),
title: new Text('Notifications'),
),
],
currentIndex: i,
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
i = index;
});
},
),
);
}
}
AppNavigationDrawer:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:my_nit2018/pages/app/app_state.dart';
import 'package:my_nit2018/pages/app/main_app.dart';
import 'package:my_nit2018/pages/app/profile/profile_page.dart';
import 'package:my_nit2018/pages/auth/login_page.dart';
class AppNavigationDrawer extends StatefulWidget {
#override
_AppNavigationDrawerState createState() => new
_AppNavigationDrawerState();
}
class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
#override
Widget build(BuildContext context) {
final appState = AppState.of(context);
return new Drawer(
child: new ListView(
padding: EdgeInsets.zero,
children: <Widget>[
new DrawerHeader(
child: new Text('MyNiT App'),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new ListTile(
title: new Text('Todo List'),
leading: new Icon(Icons.list),
onTap: () {
Navigator.pop(context);
},
),
new ListTile(
title: new Text('Subscriptions'),
leading: new Icon(Icons.subscriptions),
onTap: () {
Navigator.pop(context);
},
),
new ListTile(
title: new Text('Activity'),
leading: new Icon(Icons.timelapse),
onTap: () {
Navigator.pop(context);
},
),
new ListTile(
title: new Text('Profile'),
leading: new Icon(Icons.account_circle),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new AppState(
firebaseUser: appState.firebaseUser,
user: appState.user,
child: new ProfilePage(),
),
),
);
},
),
new ListTile(
title: new Text('Logout'),
leading: new Icon(Icons.exit_to_app),
onTap: () {
// Sign out user from app
FirebaseAuth.instance.signOut();
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new LoginPage()),
ModalRoute.withName(null));
},
),
],
),
);
}
}
Try this Simple Bottom Bar
[import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>\[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
\];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>\[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
\],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber\[800\],
onTap: _onItemTapped,
),
);
}
}][1]
Check this image for Sample

Resources