- An alert dialog informs the user about situations that requires acknowledgement.
-An alert dialog has an optional title and an optional list of actions.
-The title is displayed over the content and the action below the content.
We implement AlertDialog() in following steps:
1. Create Scaffold
Scaffold(
appBar:AppBar(
title: Text("Alert Dialog "),
),
body:RaisedButton(
onPressed:(){
return AlertDialogPage(context); //completed in next step
}
child:Text("Click to display alert dialog")
)
)
2.Create AlertDialog
AlertDialog(
title: Text("Alert!!!"),
content: Text("Do you want to close this app"),
actions: [
DialogAction("Yes"),
DialogAction("No")
]
);
Here ,content can be anything like text, images etc.
3.Create AlertDialogPage()
void AlertDialogPage(BuildContext context){
var alertDialog = AlertDialog(
title: Text("Alert!!!"),
content: Text("Do you want to close this app"),
actions: [
DialogAction("Yes"),
DialogAction("No")
]
);
showDialog(
context:context,
builder: (BuildContext context){
return alertDialog;
}
)
}
Complete Example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Alert Dialog Demo',
home: AlertDemo,
);
}
}
class AlertDemo extends StatelessWidget {
@override
Widget build(BuildContext context){
Scaffold(
appBar:AppBar(
title: Text("Alert Dialog "),
),
body:RaisedButton(
onPressed:(){
return AlertDialogPage(context); //completed in next step
}
child:Text("Click to display alert dialog")
)
)
}
void AlertDialogPage(BuildContext context){
var alertDialog = AlertDialog(
title: Text("Alert!!!"),
content: Text("Do you want to close this app"),
actions: [
DialogAction("Yes"),
DialogAction("No")
]
);
showDialog(
context:context,
builder: (BuildContext context){
return alertDialog;
}
)
}
There are other properties for AlertDialog() like:
- backgroundColor -> Color: For background color of dialog box.
- actionsPadding -> EdgeInsets: For padding around the sets of actions at the bottom of dialog.
- shape -> ShapeBorder: For shape of the border of dialog.
- contentPadding -> EdgeInsetsGeometry: For padding around the content .
- contentTextStyle -> TextStyle : For style of content in alert dialog.
- titlePadding -> EdgeInsetsGeometry: For padding around the title .
- titleTextStyle -> TextStyle : For text style of title.
Comments
Post a Comment