Check Mobile App
Read now
Start a Project

How to animate dialogs in Flutter

Save

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.

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.

showGeneralDialog() is also another method provided by flutter to show dialogs.

This function allows for the customization of aspects of the dialog popup. This function takes multiple params but we are going to need only two of them described below.

  1. transitionBuilder: It is used to define how the route arrives on and leaves off the screen. By default, the transition is a linear fade off the page’s contents.
  2. transitionDuration: It is used to determine how long it takes for the route to arrive on or leave off the screen. This argument defaults to 200 milliseconds.

Let’s animate dialog

  1. Rotate Dialog

Output

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):

dependencies:
    flutter_animated_dialog: ^2.0.1

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!!

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

When I think in getting solutions for my Ecommerce Platform, I think of Webkul. They have been such a blessing in our business. We have spent thousands of dollars in support and modules from them. We love their support team. They work very closely with us, and they always go the extra mile when we need help.

Michael Urresta

Michael Urresta

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home