Skip to main content

Flutter and Dart Create Dialog Widget

Flutter and Dart provide us a comman tool for developement of the mobile app for Android and IOS platform.  As mobile app developer we often required to implement the Dialog to so quick action, some alert msg and more to the user. In Simple word Dialogs are used to inform users about a task and can contain critical information, require decisions, or involve multiple tasks. So in this post we are going to explore the several type of the Dialoag and its implementation in Flutter. 




Type of Dialog





We have three types of dialog that Flutter and Dart SDK platform provide us.





  • Alert Dialog -- To show some content and action input from the end-user
  • Simple Dialog -- Its have lots customization option to show the dialog
  • About Dialog -- Dialog to show about us with icon and text.




Alert Dialog and its implementation in Flutter and Dart





First of all, we are going to implement the alert dialog. If you are looking to show the dialog then I am sure you have good knowledge about the dart and flutter and you have already a running project, if not then you can refer our earlier post to get started Creating a Cross-platform Mobile App with Flutter and Dart.





Let's create a function and button in main.dart file to show the dialog. Below is a simple function which will show the Alert Dialog and will pop out when the user tab on the action FlatButton.





Future<void> _showDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert Dialog Demo In Flutter'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('Alert Dialog!.'),
Text('You are Loving Flutter and Dart, is I am Right?'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Yes I Am'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}




Now, we need to add a button to our home widget view to show the Alert Dialog when user tab on the button.





 RaisedButton(
color: Colors.blue,
child: Text("Show Dialog",style: new TextStyle(fontSize: 24,color: Colors.white),),

onPressed: () {
_showDialog();
},
),








The full example of the Alert Dialog in Flutter





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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Dialog Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(

title: Text(widget.title),
),
body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[

RaisedButton(
color: Colors.blue,
child: Text("Show Dialog",style: new TextStyle(fontSize: 24,color: Colors.white),),

onPressed: () {
_showDialog();
},
),
],
),
),

);
}



Future<void> _showDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert Dialog Demo In Flutter'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('Alert Dialog!.'),
Text('You are Loving Flutter and Dart, is I amRight?'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Yes I Am'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
}




So, we have created an Alert Dialog which will get dismissed as soon as user tab on the "Yes I am" Flat button.





Alert Dialog with Positive and Negative Button in Flutter





Let's create another Alert Dialog which will show the Negative and Positive button both and once the user will tab the option a specific function can run.





enum Option{
positive,
negative
}




.We also need to change our Future _showDailog function as like below. In this dialog, a switch statement is used to decide which option has been pressed.





   Future _showDialog() async {
switch (await showDialog<Option>(

context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert Dialog Demo In Flutter'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('Alert Dialog!.'),
Text('You are Loving Flutter and Dart, is I amRight?'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Yes I Am'),
onPressed: () {
/// perform any action
Navigator.of(context).pop(Option.positive);
},
),
FlatButton(
child: Text('No'),
onPressed: () {
/// perform any action
Navigator.of(context).pop(Option.negative);
},
),
],
);
},
)
)
{
case Option.negative:
// Perform Any action
print("${Option.negative}");
break;
case Option.positive:
// Perform Any action
print("${Option.positive}");
break;
}
}




Alert Dialog with Postive and Negative Button




Simple Dialog





Simple Dialog provides the functionality to choose the option from several available options. For example, you have just asked a question to the user 'Which is your Favorite" OS' and provide the list of the OS to choose.





First of all, create our choice for the user using the enum.





enum OS{
Android,
Windows,
IOS,
None
}




Let's create our Simple Dialog as given below.





Future<void> _simpleDialog() async {
switch (await showDialog<OS>(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('Which is your Favourite OS?'),
children: <Widget>[

SimpleDialogOption(
onPressed: () { Navigator.pop(context, OS.Android); },
child: const Text('Android'),
),
SimpleDialogOption(
onPressed: () { Navigator.pop(context, OS.IOS); },
child: const Text('IOS'),
),
SimpleDialogOption(
onPressed: () { Navigator.pop(context, OS.Windows); },
child: const Text('Windows'),
),
SimpleDialogOption(
onPressed: () { Navigator.pop(context, OS.None); },
child: const Text('None of the Above'),
),

],

);
}
)
)
{
case OS.Android:
print("I am Fan of the Android");
break;
case OS.Windows:
print("I am Windows Lover");
break;
case OS.IOS:
print("I Like IOS.}");
break;
case OS.None:
print("None of the above.");
break;
}
}




Now, call this _simpleDailog function from anywhere to show the dialog.





Simple Dialog in Flutter




About Dialog in Flutter





About Dialog are used to show the details of the application and used software and platform to develop the application. Its include the name, icon, etc and one view license button. So let's create a function to show the about dialog in Flutter.





Future<void> _showAboutDialog() async{
showAboutDialog(
context: context,
applicationName: "Dialog Demo",
applicationVersion: "1.2.1",
applicationIcon: new Icon(Icons.android,color: Colors.green,),
applicationLegalese: "www.nplix.com",
children: <Widget> [
Text("Welcome to NPLIX.com"),
],
);
}




About Dialog




When you tap on the View Licenses it will open the license details in new screen like given below.





About License Dialog




Wrapping Up





So in this post, we have created three types of dialog in flutter Alert Dialog, Simple Dialog and About us Dialog. If have any query on this please ask in the comment section. You can further learn more about these on the Flutter page.


Comments

  1. Fit ManiaI like lifting weights. And there is a cardio element to lifting if you're doing it the way I do it.

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

Create Custom EditText View in Android

We use the EditText for taking the input from the user and use it at several places in our project. We required to do lots of customization for each time and there are lots of redundant code we write. Writing and managing these redundant codes is very difficult for example if we want to change the look and feel of the view them we need to modify it at each place where our EditText is getting used. So to avoid these kinds of the problem we can create our own Custom EditText View by just. The EditText view is just an extension of the TextView with lots of editing option and properties that required for the user input. How To Create Custom EditText View For creating the Custom EditText we need to extend the AppCompatEditText and override all three constructors of the view as given below. import android.content.Context; import android.graphics.Typeface; import android.support.annotation.Nullable; import android.support.v7.widget.AppCompatEditText; import android.util.AttributeSet; public