How to make different Alert Dialog using Flutter?

Prafulla Singh
2 min readMay 11, 2020

Flutter’s inbuild Alert Dialogs are very customizable. We going to implement the Following type of Dialogs using flutter:

  1. Android Material Design Alert.
  2. iOS Type Alert
  3. Custom Alert

Android Material Design Alert is in-build with the material package. it supports Title, Content(an image, Text Field, etc) with any number of Buttons.

Android Dialog Demo

If we want to add TextField. We can update content to TextField like following:

textField Demo

iOS Type Alert comes with a Cupertino theme. This theme is primarily build to give flutter app a native iOS look and feel. We will use showCupertinoDialog to get iOS-like animation with CupertinoAlertDialog like following:

  • Don’t forget to import ‘package:flutter/material.dart’ before using the above.
  • We can add TextField using the same logic as a material design alert.

Custom Alert, As we have access to alert’s widget. we can also modify it to custom alert type like the following example:

--

--