The dialog is a kind of widget that comes on the window or the screen which contains any basic data or can request any choice. At the point when a dialog put away is popped the wide range of various functions get disabled until you close the dialog box or give an answer. We utilize a Cupertino Alert dialog box for straightforward pop-up messages in which are shown.
In this blog, we will explore the Cupertino Alert Dialog In Flutter. We will see how to implement a Cupertino alert dialog demo program and show how to create it in your flutter applications.
Table Of Contents::
Cupertino Alert Dialog:
The CupertinoAlertDialog class is utilized to make a Cupertino alert dialog. Action button that appears as though a standard iOS dialog button, can be made utilizing CupertinoDialogAction. This dialog can be shown utilizing showDialog() a capacity. In any case, there is another capacity showCupertinoDialog() that shows a dialog with an iOS-style passage and exit animations.
Demo Module :
This demo video shows how to create a Cupertino alert dialog in a flutter. It shows how the Cupertino alert dialog will work in your flutter applications. It shows how the Cupertino alert dialog will work when the user taps the button, then the pop-up dialog shows. It will be shown on your device.
Properties:
There are some properties of Cupertino alert dialog are:
- > title: This property was optional. The title of the dialog is displayed in a large font at the top of the dialog.
- > content: This property was optional. The content of the dialog is displayed in the center of the dialog in a lighter font.
- > actions: This property was also optional.The set of actions that are displayed at the bottom of the dialog.
- > scrollController: This property is used as a scroll controller that can be used to control the scrolling of the content in the dialog.
- > actionScrollController: This property is used as a scroll controller that can be used to control the scrolling of the actions in the dialog.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called home_page.dart inside the lib folder.
In the body, we will add the Column widget. Inside the widget, we will add mainAxisAlignment and crossAxisAlignment will be center. Also, we will add an image from the assets folder. We will add RaisedButton() with color and onPressed Function. In this function, we will add _showDialog(context). We will deeply define the below code. It’s child property, we will add the text ‘Show AlertDialog’.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset("assets/logo.png",scale: 12,),
SizedBox(height: 50,),
RaisedButton(
color: Colors.green[100],
onPressed: () {
_showDialog(context);
},
child: Text('Show AlertDialog'),
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will deeply define _showDialog(context):
We will create a _showDialog() method. In this method, we will add showDialog(). Inside the dialog, we will add context and CupertinoAlertDialog() function. In this function, we will add a title that means the user wants to add any title, content means the user displays any data at the center of the dialog. Also, we will add actions: <Widget>. Inside, we will add three CupertinoDialogAction() with different text.
_showDialog(BuildContext context){
showDialog(
context: context,
child: CupertinoAlertDialog(
title: Column(
children: <Widget>[
Text("CupertinoAlertDialog"),
Icon(
Icons.favorite,
color: Colors.red,
),
],
),
content: new Text( "An iOS-style alert dialog."+
"An alert dialog informs the user about situations that require acknowledgement."
" An alert dialog has an optional title, optional content, and an optional list of actions."),
actions: <Widget>[
CupertinoDialogAction(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},),
CupertinoDialogAction(
child: Text("CANCEL"),
onPressed: () {
Navigator.of(context).pop();
},),
CupertinoDialogAction(
child: Text("MAY BE"),
onPressed: () {
Navigator.of(context).pop();
},),
],
));
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("Flutter Cupertino Alert Dialog Demo"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset("assets/logo.png",scale: 12,),
SizedBox(height: 50,),
RaisedButton(
color: Colors.green[100],
onPressed: () {
_showDialog(context);
},
child: Text('Show AlertDialog'),
),
],
),
),
);
}
_showDialog(BuildContext context){
showDialog(
context: context,
child: CupertinoAlertDialog(
title: Column(
children: <Widget>[
Text("CupertinoAlertDialog"),
Icon(
Icons.favorite,
color: Colors.red,
),
],
),
content: new Text( "An iOS-style alert dialog."+
"An alert dialog informs the user about situations that require acknowledgement."
" An alert dialog has an optional title, optional content, and an optional list of actions."),
actions: <Widget>[
CupertinoDialogAction(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},),
CupertinoDialogAction(
child: Text("CANCEL"),
onPressed: () {
Navigator.of(context).pop();
},),
CupertinoDialogAction(
child: Text("MAY BE"),
onPressed: () {
Navigator.of(context).pop();
},),
],
));
}
}
Conclusion:
In the article, I have explained the basic structure of the Cupertino Alert Dialog in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Alert Dialog On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Cupertino Alert Dialog in your flutter projects. We will show you what the Cupertino Alert Dialog is?. Show some properties of the Cupertino Alert Dialog. That is an illustration of how to make Cupertino Alert Dialog. Make a demo program for working Cupertino Alert Dialog and it shows pop-up dialog in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
