Flutter - Animated AlertDialog in Flutter
Last Updated :
24 Apr, 2025
Animating an AlertDialog in Flutter involves using the Flutter animations framework to create custom animations for showing and hiding the dialogue. In this article, we are going to add an animation to an AlertDialog. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of Creating an Animation in Flutter
Create an AnimationController:
final AnimationController _controller = AnimationController(
duration: Duration(seconds: 1), // Set the duration of the animation
vsync: this, // Provide a TickerProvider, often you can use 'this'
);
Define the Animation:
final Animation<double> _animation = Tween<double>(
begin: 0.0, // Starting value of the animation
end: 1.0, // Ending value of the animation
).animate(_controller);
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Define the app's theme
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: OpenDialog(),
);
}
}
Step 5: Create OpenDialog Class
In this class we are going to create a button by clicking the button a animated AlertDialog will opened. Comments are added for better understanding.
Dart
class OpenDialog extends StatelessWidget {
// Function to show the animated dialog
void _showAnimatedDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AnimatedAlertDialog();
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated AlertDialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
_showAnimatedDialog(context);
},
child: Text('Show Animated Dialog'),
),
),
);
}
}
Step 6: Create AnimatedAlertDialog Class
In this class we are going to add animation to an AlertDialog .It define a AnimationController then we use Tween animation for it. Comments are added for better understanding .
Dart
class AnimatedAlertDialog extends StatefulWidget {
@override
_AnimatedAlertDialogState createState() => _AnimatedAlertDialogState();
}
class _AnimatedAlertDialogState extends State<AnimatedAlertDialog>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
// Adjust the duration as needed
duration: Duration(milliseconds: 800),
);
_scaleAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
// Start the animation
// when the dialog is displayed
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: ScaleTransition(
scale: _scaleAnimation,
child: AlertDialog(
title: Text("Animated Alert Dialog"),
content: Text("This is an animated AlertDialog."),
actions: <Widget>[
TextButton(
child: Text("Close"),
onPressed: () {
// Reverse the animation and close the dialog
_controller.reverse();
Navigator.of(context).pop();
},
),
],
),
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Define the app's theme
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: OpenDialog(),
);
}
}
class OpenDialog extends StatelessWidget {
// Function to show the animated dialog
void _showAnimatedDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AnimatedAlertDialog();
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated AlertDialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
_showAnimatedDialog(context);
},
child: Text('Show Animated Dialog'),
),
),
);
}
}
class AnimatedAlertDialog extends StatefulWidget {
@override
_AnimatedAlertDialogState createState() => _AnimatedAlertDialogState();
}
class _AnimatedAlertDialogState extends State<AnimatedAlertDialog>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 800), // Adjust the duration as needed
);
_scaleAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
// Start the animation when
// the dialog is displayed
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: ScaleTransition(
scale: _scaleAnimation,
child: AlertDialog(
title: Text("Animated Alert Dialog"),
content: Text("This is an animated AlertDialog."),
actions: <Widget>[
TextButton(
child: Text("Close"),
onPressed: () {
// Reverse the animation
// and close the dialog
_controller.reverse();
Navigator.of(context).pop();
},
),
],
),
),
);
}
}
Output:
Similar Reads
Flutter - RFlutter Alerts
In Flutter, rflutter_alert is useful to create alerts in applications easily. It is a customizable and best way to create alerts in Flutter. In this article, we will see the different styles of alerts we can create with this awesome Flutter library. Follow the article to learn about it. Adding the d
4 min read
Alert Dialog box in Flutter
Alert Dialog box informs the user about the situation that requires acknowledgment. Alert Box is a prompt that takes user confirmation. The very basic use of the alert box is used when we close the app, usually, we are notified with a prompt whether we want to exit or not. That's an alert box.The be
2 min read
Flutter - Implement an Image Inside an AlertDialog
AlertDialogs are a common tool used to deliver messages, notifications, or interactive content to users. While Flutter provides a straightforward way to create AlertDialogs, it may not be immediately obvious how to include images inside them. Fortunately, this article will guide you through the proc
4 min read
Flutter - Implement Stepper Widget Inside an AlertDialog
The Stepper widget in Flutter is a user interface element used to create a step-by-step process interface. It allows users to progress through a series of steps or stages, with each step typically representing a specific task or some information. An Alert Dialog is a useful way to grab users' attent
5 min read
Flutter - Display a GridView Within an AlertDialog Box
AlertDialogs are useful Widgets in Flutter to attract the users attention to a particular message that is showing by the Alert Dialogs, GridView are efficient widgets to display items in a Grid like structure. To implement a GridView inside an AlertDialog in Flutter, you can create a custom dialog c
5 min read
Flutter - Implement DropdownButton Inside an AlertDialog
DropdownButton widget is used to create a dropdown menu that allows users to select one option from a list of available choices. It's a common user interface element for selecting items from a list. An Alert Dialog is a useful way to grab users' attention. Here we can see how to implement an AlertDi
5 min read
Flutter - Spin Bottle Animation
In Flutter, Spin Bottle Animation is a fun and attractive animation, here we can achieve this by using the Flutter RotationTransition and AnimatedBuilder widget, In this animation, a bottle is rotated when we press a button. In this article, we are going to implement the Spin Bottle Animation using
5 min read
Flutter - AnimatedBuilder Widget
The AnimatedBuilder widget in Flutter is a powerful utility widget that is used for creating complex animations by rebuilding a part of the widget tree in response to changes in an animation's value. It is especially useful when you want to animate properties of child widgets that cannot be directly
4 min read
AnimatedList Flutter
AnimatedList in Flutter is a dynamic list component that enables us to insert and remove elements dynamically. AnimatedList is a list that animates the items when they are removed or inserted enhancing the user experience. As we all using ListView in Flutter lists for displaying a collection of item
8 min read
Flutter - Animated Navigation
By default, Flutter has no animation when navigating from one Screen to another Screen. But in this tutorial, we are going to learn how to animate the Screen Transition. Project Setup Before directly applying to your existing project, practice the code in some example projects. For this tutorial, we
4 min read