Write Your Own Widget #1: Custom Alert Dialog

In the Flutter: Write Your Own Widget series, I’ll be showing you how to build your own custom widgets, based on what is available in the Flutter native libraries, so you don’t have to rely on others to keep up with the maintenance, as you would have to when using a third-party library.

So to start with something easy, I picked the AlertDialog material class. The classic AlertDialog looks like this:

Font: https://flutter.github.io/assets-for-api-docs/assets/material/alert_dialog.mp4

So a while ago, while writing an app for a customer, I stumbled upon an use case where the single button / action wasn’t enough to deliver what my client needed. I knew then I would need a customized version of that widget.

But I already had material alerts popping up throughout different views, and I did not want to have to import and entire library that could disrupt the entire visual identity I created for my client’s app for just one screen.

So I created a lib/widgets folder, in which I placed my custom_alert_dialog.dart file. The file looks like this:

import 'package:flutter/material.dart';class CustomAlertDialog {
static show({
BuildContext context,
String title,
String content,
bool hasSecondButton = false,
String secondButtonText,
Function onSecondButtonPressed,
bool hasThirdButton = false,
Function onThirdButtonPressed,
String thirdButtonText,
String closeText,
TextAlign textAlign
}) {
showDialog<dynamic>(
context: context,
builder: (_) => AlertDialog(
title: Text(title),
actions: [
hasThirdButton ? FlatButton(
child: Text(
thirdButtonText.toUpperCase(),
style: TextStyle(
color: UIColors.cargosignalTeal,
fontWeight: FontWeight.bold,
),
),
onPressed: onThirdButtonPressed,
) : Container(),
hasSecondButton ? FlatButton(
child: Text(
secondButtonText.toUpperCase(),
style: TextStyle(
color: UIColors.cargosignalTeal,
fontWeight: FontWeight.bold,
),
),
onPressed: onSecondButtonPressed,
) : Container(),
FlatButton(
child: Text(
closeText.toUpperCase(),
style: TextStyle(
color: Colors.black,
),
),
onPressed: () => Navigator.of(context).pop(),
),
],
content: Text(
content,
textAlign: textAlign ? textAlign : TextAlign.left,
),
),
);
}
}

I defined the possibility of having two or three buttons in the alert, one of which would always be a closing button — with customizable text, since I might want to say “cancel” or “close” or “no”, based on the also customizable content. All the text in the alert is custom. And the way I placed the ternaries, you can choose to have extra buttons or not. That way I was able to use it through my entire code.

And in order to use it, call it from your function like this:

...CustomAlertDialog.show(
context: context, //this is necessary in order to properly pop the alert
title: 'The title of the alert',
content: 'The content of the alert',
hasSecondButton: true, //you can just not pass this if you don't want a second button
secondButtonText: 'Text for second button', //this only applies if you do have a second button
onSecondButtonPressed: () => ... //do function
hasThirdButton: true, //you can just not pass this if you don't want a second button
thirdButtonText: 'Text for second button', //this only applies if you do have a second button
onThirdButtonPressed: () => ... //do function
closeText: 'Cancel',
);
...

And as the purpose of this series is to enable you to do your own widget as you please, feel free to use my code and adapt the CustomAlertDialog class to fit your needs.

If you enjoyed this tutorial, please click the 👏 button and share to help others find it! Feel free to leave a comment below or reach me through my contact info.

--

--

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
Anne Oliveira

Anne Oliveira

I'm a mobile developer focusing on Flutter. Here's my [very WIP] GitHub: https://github.com/anneoliveira