Building a Flutter AlertDialog in just 15 minutes

Learn how to implement a customized Alert Dialog / Popup in Flutter.

Shivam Goyal
Nov 17, 2019 · 3 min read

Introduction

The AlertDialog is basically a Popup in Flutter. Whenever you want to create a floating box that is centered on the page, you can simply use an AlertDialog. The implementation of the same is very easy and has been provided in-build with Flutter SDK. So, let's dive in… 👻

In this tutorial, you’ll build a mobile app featuring an AlertDialog / Popup in Flutter. The AlertDialog will have the following features:

  • Animated loader GIF
  • Customized actions buttons
  • Curved Edges
That’s exactly how our AlertDialog gonna look like

This tutorial focuses on adding an AlertDialog to the Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.


Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available at the following blog post

Coding the component

Download the GIF by right-clicking, and saving it as listening.gif at /{%PROJECTROOT%}/assets/images/listening.gif

Credits: Bendt on Pinterest

Import the GIF to your project by adding the file path to your pubspec.yaml file.

Create a file named voicePayDialog.dart in the same directory as of your main.dart file and amend the file with the following code:

To show the AlertDialog / Popup add the following code to onPressed or onTap parameter of any button in your main.dart file:

Remember to import voicePayDialog.dart in main.dart

  • Connect your Emulator or physical Android device to test the application.
  • Click on Build & Run.
  • And Boooom 🧨, your app is ready to launch.

Congratulations!

You have completed this tutorial and have built a Flutter app with an AlertDialog! Also, in the meantime, you integrated GIFs in the App.



🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.

Feeling too generous? Buy me a Drink 🍺

Wanna collaborate? Let’s talk some tech 😊

Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

Flutter Community

Articles and Stories from the Flutter Community

Shivam Goyal

Written by

👨‍💻 Flutter Dev & Facilitator | Microsoft Student Partner | Tech Blogger | 👨‍👧‍👦 MLH Organizer | 🌐 itsshivam.com

Flutter Community

Articles and Stories from the Flutter Community

More From Medium

More from Flutter Community

More from Flutter Community

More from Flutter Community

DateField in Flutter Made Easy

More from Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade