Show aligned dialogs in Flutter

Dialog is an important interaction model in UI design. In Flutter, you can open a dialog by calling the showDialog function:

Future<T?> showDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  bool barrierDismissible = true,
  Color? barrierColor = Colors.black54,
  String? barrierLabel,
  bool useSafeArea = true,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
})

The builder usually returns a Dialog widget like an AlertDialog or SimpleDialog. There are also many packages on pub.dev that lets you build more customized dialog widgets. The dialog has no information about where the widget that opens it lies on the screen and is almost always just at the center of the screen. This is fine for mobile devices, but may not be so desirable on larger devices. What we see on the web is typically a button that opens a dialog that is right next to the button itself. Can we achieve this in Flutter?

Introducing the showAlignedDialog function

Below is the interface of the showAlignedDialog function:

Future<T?> showAlignedDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  bool barrierDismissible = true,
  Color? barrierColor = Colors.black54,
  String? barrierLabel,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
  Alignment followerAnchor = Alignment.center,
  Alignment targetAnchor = Alignment.center,
  Offset offset = Offset.zero,
  bool avoidOverflow = false,
  bool isGlobal = false,
  RouteTransitionsBuilder? transitionsBuilder,
  Duration? duration,
})

The last seven parameters are what's new.

• targetAnchor and followerAnchor tell which part of the original widget and the dialog should be aligned. Similar to what the CompositedTransformFollower widget requires.
• offset is for additional fine control of the dialog.
• Part of the dialog may be rendered outside of the screen if avoidOverflow is set to false. Otherwise, the dialog will be shifted to avoid visual overflow if possible.
• If isGlobal is set to true, then the dialog will be aligned according to the followerAnchor, relative to the whole screen. targetAnchor is ignored in this case. This is useful if you want to show a drawer widget.
• transition builder and duration are used to control how the dialog shows up. The default behavior is a fade transition. But you can add your own like a slide-in transition.

Everything else works just like the built-in showDialog function.

Now let's see this package in action:

Local dialogs

You can show a do more action menu relative to the button, or an expanded view of a smaller image. Use cases should be plenty.

when isGlobal is set to true

You can also show drawers wherever you like on the screen.

Code to show a left drawer

That’s all for the aligned_dialog package. It allows you to open dialogs with more positioning and transitioning customizability.

Other packages I have published so far on pub.dev:

• flutter_class_parser. A package for serialize/deserialize built-in Flutter data classes and enums.
• dimension. Let you calculate dimensions with different units and apply functions like clamp, min, max, similar to what CSS offers.
• morphable_shape. Let you create all kinds of shapes that can be morphed between each other. Partial shape borders, gradient borders, etc. Visit fluttershape.com for a online demo.
• animated_styled_widget. styling and making implicit and explicit animations of a container-like widget. Also provides you with component widgets like styled button, radio, switch, toggle button, and slider. Useful for apps with advanced UI customization need.
• responsive_property. A responsive solution inspired by MaterialStateProperty. Make objects from a number to a widget responsive.

My current focus is on UI development, especially on serialization, animation, responsiveness, and more customization, which can be reflected on the packages I develop. If you have any suggestions, feel free to contact me on Medium or on Github. Thank you!