How to animate dialogs in Flutter

Flutter provides great support for animations. However, this is not the case with Dialogs. The default animations in Flutter’s dialogs are simple and predetermined because of this we need to do a lot of work to animate dialogs. In this article, we are going to learn how to animate dialogs in Flutter app. We are going to animate dialogs by using a third-party package and without using any third-party package.

Read more about Flutter app development from mobikul.

Animate Dialog without using Third Party Library

First, we are going to animate dialogs without using any external package that is we are going to write our own code.

Simple Dialog

showDialog() method in Flutter allows us to display basic dialogs with default animation.

The following GIF shows a basic dialog in flutter.

Let’s animate dialog

2. Scale Dialog

Output:

Animate Dialogs by using Third Party Library

The benefit of using a third-party library is that we do not have to write the whole logic on our own. Flutter has packages for almost everything. It also has a package to animate dialogs which is flutter_animated_dialog. So we are going to use this package.

Follow the below instructions to install and use this package.

With Flutter

flutter pub add flutter_animated_dialog

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Now in your Dart code, you can use:

import 'package:flutter_animated_dialog/flutter_animated_dialog.dart';

Animate dialogs by using library:

showAnimatedDialog() method accepts a paramater animationType that is used to vary animations. Please head over here to know about supported animationType.

Output:

Conclusion

In this article, we learnt about how we can animate dialogs in flutter. These are some of the basic and easy animations but you may use more complex animations.

I hope this blog will help you in getting some basic knowledge about dialog animations.

Thank you for reading!!