How To Animate Dialogs In Flutter? Here Is Answer

Photo by Markus Spiske on Unsplash

Hello, I’m Mayur. This is the first article of my life and on Medium also.

Animations give a better experience to the user. I know and you might be knowing that Flutter has great support for Animations with ease of use. But wait, not in the case of Dialogs. Flutter’s Dialogs have some simple and predefined Animations.

There are tons of great articles for getting started with Animations in Flutter. But unfortunately, it doesn’t cover Animations for Dialogs.

Hey, don’t worry. I’m writing this article to solve this problem. In this article, I will show you how to animate dialogs in Flutter. Not only some simple animations but you can use any or many curves from Curves.

Simple Dialog

Flutter has showDialog() to show basic dialogs with basic animation. Following GIF shows a basic dialog in Flutter.

showDialog()

So, let’s animate it.

Internally Flutter calls showGeneralDialog() via showDialog().

Let’s dive into showGeneralDialog(). Here are some parameters.

Future<T> showGeneralDialog<T>({
@required BuildContext context,
@required RoutePageBuilder pageBuilder,
bool barrierDismissible,
String barrierLabel,
Color barrierColor,
Duration transitionDuration,
RouteTransitionsBuilder transitionBuilder,
})

Note: All arguments are required otherwise some error will occur.

Some main arguments in showGeneralDialog<T> are

1. barrierDismissible -> Defines whether dialog may be dismissible or not.
2. barrierColor -> Background color of dialog.
3. transitionDuration -> Duration of animation when the dialog appears and disappears.
4. transitionBuilder -> Takes RouteTransitionsBuilder A builder function, called with animation values whenever dialog needs a rebuild. The implementation is shown below.

typedef RouteTransitionsBuilder = Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child);

The main parameter of RouteTransitionsBuilder is animation. You can use it to animate things in a dialog.

So, let’s do some practicals

1. Rotate

Rotate

import 'package:vector_math/vector_math.dart' as math;
showGeneralDialog(
    context: context,
    pageBuilder: (context, anim1, anim2) {},
    barrierDismissible: true,
    barrierColor: Colors.black.withOpacity(0.4),
    barrierLabel: '',
    transitionBuilder: (context, anim1, anim2, child) {
      return Transform.rotate(
        angle: math.radians(anim1.value * 360),
        child: AlertDialog(
          shape:
              OutlineInputBorder(borderRadius: BorderRadius.circular(16.0)),
          title: Text('Hello!!'),
          content: Text('How are you?'),
        ),
      );
    },
    transitionDuration: Duration(milliseconds: 300));

2. Rotate with Opacity

Rotate with Opacity

import 'package:vector_math/vector_math.dart' as math;
showGeneralDialog(
    context: context,
    pageBuilder: (context, anim1, anim2) {},
    barrierDismissible: true,
    barrierColor: Colors.black.withOpacity(0.4),
    barrierLabel: '',
    transitionBuilder: (context, anim1, anim2, child) {
      return Transform.rotate(
        angle: math.radians(anim1.value * 360),
        child: Opacity(
          opacity: anim1.value,
          child: AlertDialog(
            shape:
                OutlineInputBorder(borderRadius: BorderRadius.circular(16.0)),
            title: Text('Hello!!'),
            content: Text('How are you?'),
          ),
        ),
      );
    },
    transitionDuration: Duration(milliseconds: 300));

Ah, these are some simple animations let’s do some complex one. Let’s use Curves.

3. Curves.easeInOutBack

Using curve easeInOutBack

showGeneralDialog(
    barrierColor: Colors.black.withOpacity(0.5),
    transitionBuilder: (context, a1, a2, widget) {
      final curvedValue = Curves.easeInOutBack.transform(a1.value) -   1.0;
      return Transform(
        transform: Matrix4.translationValues(0.0, curvedValue * 200, 0.0),
        child: Opacity(
          opacity: a1.value,
          child: AlertDialog(
            shape: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16.0)),
            title: Text('Hello!!'),
            content: Text('How are you?'),
          ),
        ),
      );
    },
    transitionDuration: Duration(milliseconds: 200),
    barrierDismissible: true,
    barrierLabel: '',
    context: context,
    pageBuilder: (context, animation1, animation2) {});

4. Scale

Scale

showGeneralDialog(
    barrierColor: Colors.black.withOpacity(0.5),
    transitionBuilder: (context, a1, a2, widget) {
      return Transform.scale(
        scale: a1.value,
        child: Opacity(
          opacity: a1.value,
          child: AlertDialog(
            shape: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16.0)),
            title: Text('Hello!!'),
            content: Text('How are you?'),
          ),
        ),
      );
    },
    transitionDuration: Duration(milliseconds: 200),
    barrierDismissible: true,
    barrierLabel: '',
    context: context,
    pageBuilder: (context, animation1, animation2) {});

If you need more customization you can visit Flutter Animations guide and can apply your software specific logic for Animations. From this method you can use any curve, any type of animation.

You just need to play with the values 😀.

If you like the article just click on 👏. Rate it out of 50. Goodbye.