Custom dialog in Flutter

  • Text for Heading and Description
  • RaisedButton for Button
  • CircularAvatar for the circle in the top.
class CustomDialog extends StatelessWidget {
final String title, description, buttonText;
final Image image;

CustomDialog({
@required this.title,
@required this.description,
@required this.buttonText,
this.image,
});

@override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Consts.padding),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(context),
);
}
}
dialogContent(BuildContext context) {
return Stack(
children: <Widget>[
//...bottom card part,
//...top circlular image part,
],
);
}
Container(
padding: EdgeInsets.only(
top: Consts.avatarRadius + Consts.padding,
bottom: Consts.padding,
left: Consts.padding,
right: Consts.padding,
),
margin: EdgeInsets.only(top: Consts.avatarRadius),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(Consts.padding),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
Text(
title,
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 16.0),
Text(
description,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(height: 24.0),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.of(context).pop(); // To close the dialog
},
child: Text(buttonText),
),
),
],
),
),
Positioned(
left: Consts.padding,
right: Consts.padding,
child: CircleAvatar(
backgroundColor: Colors.blueAccent,
radius: Consts.avatarRadius,
),
),
class Consts {
Consts._();

static const double padding = 16.0;
static const double avatarRadius = 66.0;
}
showDialog(
context: context,
builder: (BuildContext context) => CustomDialog(
title: "Success",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
buttonText: "Okay",
),
);

--

--

--

Flutter Developer 💙

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

AWS Simple Workflow to Step Functions: Serverless Orchestration for a Business-Critical Workflow

The Attraction Of .Net Framework In Software Development Outsourcing Services

Getting started with Python for Data Science Part — 2

Working with Firebase Storage in Flutter — Part 1

UniLend’s Initium Alpha is Live! Ushering in a New Era of Inclusive DeFi

Form in HTML and CSS

How to Use Google Colab’s Cloud TPUs in multiple cores in Pytorch for Super-fast Neural Network…

Importance of Having a Mobile App for Your Logistics Company

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Venkatesh Prasad V M

Venkatesh Prasad V M

Flutter Developer 💙

More from Medium

Create A Video Recording on Flutter Web

Two ways to add icons to the drawer items — Flutter

Flutter Custom Text Widget

Floor Package | Notes App Example

Floor Package Image