In this example we will learn how to use ShowDialog In Flutter to show an Alert Box.
Why We Use ShowDialog/ Alert Box In Flutter?
Generally to show some information on the button click on warning or successful message, the ShowDialog is used. But Please note that the ShowDialog is now deprecated. We will use Alert Box to show the alert message.
The below code shows how to show Alert dialog box in flutter. It generally takes user permission and process further.
Key Properties Of Alert Dialog
- action: the set of action that displays bottom of the box.
- title: The text which shows top in the dialog box.
- content: This is used to give the message to the user according to the title.
- elevation: It gives default show to the box.
- background color: Used to set background color.
import 'package:flutter/material.dart';
class TestClass extends StatefulWidget {
const TestClass({Key key}) : super(key: key);
@override
_TestClassState createState() => _TestClassState();
}
class _TestClassState extends State<TestClass> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Alert Dialog Demo"),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 30),
child: Center(
child: RaisedButton(
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: Text("Show Alert Dialog Box"),
content: Text("You have raised a Alert Dialog Box"),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("Ok"),
),
],
),
);
},
child: Text("Show alert Dialog box"),
),
),
),
],
),
),
);
}
}
Result
When you will click on the button, The Alert Dialog will appear.
Thank you for visiting the showdialog tutorial on fluttertpoint. Please learn more useful flutter tutorials from here.