I have been trying different things with Flutter for some time, and I staggered a lot of times, making custom widgets from designs for applications. Even though Flutter is staggeringly simple to make UI parts, you need to experience a lot of trial procedures to get what we need.
In this blog, We will be going to explore Custom Dialog In Flutter and show a demo of how to make a custom dialog in your flutter applications.
Contents:
Custom Dialog
A dialog resembles a popup window to give a few alternatives to users(options like acknowledging/decay). Basic Alert Dialog won’t be helpful for each necessity. On the off chance that you need to execute further developed custom Dialog, you can utilize the Dialog widget for that. Rather than the AlertDialog, in here, we return the Dialog widget. The showDialog technique will continue as before.
Code Implementation :
Create a new dart file called dialog.dart inside the lib folder.
In this screen, we will create a button for opening a dialog and button named called it Custom Dialog.
Container(
child: Center(
child: RaisedButton(
onPressed: (){},
child: Text("Custom Dialog"),
),
),
),
Create a new dart file called constants.dart inside the lib folder.
It is just a class to store the few constants, as shown down here.
import 'package:flutter/material.dart';
class Constants{
Constants._();
static const double padding =20;
static const double avatarRadius =45;
}
Create a new dart file called custom_dialog_box.dart inside the lib folder.
In this screen, we will use CircularAvatar for the image at the top, Text for Title and Descriptions, and FlatButton for button.
Let’s declare the CustomDialogBox class.
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Constants.padding),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
We are setting all the properties of dialog and title to contentBox(), which contains all our significant widgets.
Dialog, as a matter of course, accompanies its background color and elevation. Since we won’t use it, we are setting backgroundColor to Colors.transparent and elevation to 0.
contentBox(context){
return Stack(
children: <Widget>[
Container(),// bottom part
Positioned(),// top part
],
);
}
The Stack shows the keep last element on the top. We have circular toward the end to overlap on the card. How about we dive profound into every one of the children.
Container(
padding: EdgeInsets.only(left: Constants.padding,top: Constants.avatarRadius
+ Constants.padding, right: Constants.padding,bottom: Constants.padding
),
margin: EdgeInsets.only(top: Constants.avatarRadius),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(Constants.padding),
boxShadow: [
BoxShadow(color: Colors.black,offset: Offset(0,10),
blurRadius: 10
),
]
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(widget.title,style: TextStyle(fontSize: 22,fontWeight: FontWeight.w600),),
SizedBox(height: 15,),
Text(widget.descriptions,style: TextStyle(fontSize: 14),textAlign: TextAlign.center,),
SizedBox(height: 22,),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: (){
Navigator.of(context).pop();
},
child: Text(widget.text,style: TextStyle(fontSize: 18),)),
),
],
),
),
We are utilizing a Container and BoxDecoration for making the card, and since the half of circular avatar ought to be on the card, we include padding and margin as needs are with the characteristic Constants.avatarRadiusand Constants.paddding. We will include the title, descriptions, and text of a button.
Positioned(
left: Constants.padding,
right: Constants.padding,
child: CircleAvatar(
backgroundColor: Colors.transparent,
radius: Constants.avatarRadius,
child: ClipRRect(),
),
We will use Positioned widget as a child in Stack to wrap the CircularAvatar. Also the left and right attributes are set to the same values to place in the center of the Stack. We will add background color, radius, and use ClippRRect() for the image.
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(Constants.avatarRadius)),
child: Image.asset("assets/model.jpeg")
),
We will use ClippRRect()for the image circular border.
Now, then add CustomDialogBox in dialog.dart the lib folder.
import 'package:custom_dialog_flutter_demo/custom_dialog_box.dart';
import 'package:flutter/material.dart';
class Dialogs extends StatefulWidget {
@override
_DialogsState createState() => _DialogsState();
}
class _DialogsState extends State<Dialogs> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Custom Dialog In Flutter"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Container(
child: Center(
child: RaisedButton(
onPressed: (){
showDialog(context: context,
builder: (BuildContext context){
return CustomDialogBox(
title: "Custom Dialog Demo",
descriptions: "Hii all this is a custom dialog in flutter and you will be use in your flutter applications",
text: "Yes",
);
}
);
},
child: Text("Custom Dialog"),
),
),
),
);
}
}
In the onPressed() the method you will call showDialog and return CustomDialogBox when the button then the custom dialog will pop up.
Code File
https://gist.github.com/ShaiqAhmedkhan/78bec9a4145881662c50848f08a12ffe#file-custom_dialog_box-dart
You will see a full code on a GitHub, and this is a small demo example of Custom Dialog in a flutter; and this below video shows how Custom Dialog will work and pop up show.
Conclusion:
In the article, I have explained the basic demo of Custom Dialog you can modify this code according to your choice, and this was a small introduction of Custom Dialog from my side and its working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Custom Dialog in Flutter in your flutter projects. This is a demo example that will integrate Custom Dialog in a flutter and show pop up, 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.
find the source code of the Flutter Custom Dialog Demo:
flutter-devs/flutter_custom_dialog_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
