↔️ Super Dialog

Beautiful Animated Dialogs for Flutter

pub package License: MIT Flutter likes popularity points Platform Live Demo

A powerful, flexible, and beautifully animated dialog toolkit for Flutter.
Create stunning dialogs with smooth slide, scale, and fade animations.


πŸ“– Documentation β€’ πŸš€ Quick Start β€’ πŸ“š Examples β€’ πŸ§ͺ Demo


✨ Features

🎬 Rich Animations

  • 24 Pre-built animation styles
  • Slide, rotation, bounce, elastic
  • Flip & expand effects
  • RTL-aware transitions

πŸ“ Positioned Dialogs

  • 9 screen positions (3Γ—3 grid)
  • Custom start & end positions
  • 10 transition types
  • Fine-grained control

βš™οΈ Highly Configurable

  • Custom duration & curves
  • Barrier color & blur
  • Size constraints
  • Safe area handling

πŸ”§ Developer Friendly

  • Simple, intuitive API
  • Full TypeScript-like generics
  • Lifecycle callbacks
  • Zero dependencies

πŸ“¦ Installation

Add to your pubspec.yaml:

dependencies:
  super_dialog: ^0.3.0
flutter pub get

πŸš€ Quick Start

Basic Dialog

import 'package:super_dialog/super_dialog.dart';

SuperDialog.showAnimatedDialog<void>(
  context,
  (context) => const MyCustomDialog(),
  animation: DialogAnimation.bottomToTop,
);

Positioned Dialog (NEW in 0.2.0)

SuperDialog.showPositionedDialog<void>(
  context,
  (context) => const MyDialog(),
  startPosition: DialogPosition.topEnd,
  endPosition: DialogPosition.center,
  transitionType: PositionedTransitionType.slideFadeScale,
);

🎬 Animation Types

Slide Animations

Animation Description Best For
startToEnd Slides from leading edge (RTL-aware) Side drawers, navigation panels
endToStart Slides from trailing edge (RTL-aware) Settings panels, details views
topToBottom Drops from top Notifications, banners, alerts
bottomToTop Rises from bottom Action sheets, bottom menus

Scale & Fade Animations

Animation Description Best For
centerScale Scales from 92% with fade Confirmations, important alerts
centerFade Simple fade in/out Toasts, status messages

Rotation Animations ✨ NEW

Animation Description Best For
rotateIn Rotates -15Β° to 0Β° with fade Fun notifications, casual dialogs
rotateScale Combines rotation + scale + fade Important announcements, special dialogs

Bounce Animations ✨ NEW

Animation Description Best For
bounceIn Elastic bounce scale effect Success messages, celebrations
bounceSlidBottom Slides from bottom with bounce Action sheets with personality

Elastic Animations ✨ NEW

Animation Description Best For
elasticIn Elastic scale with overshoot Interactive dialogs, game UIs
elasticSlideBottom Slides up with elastic overshoot Modern bottom sheets

Expand Animations ✨ NEW

Animation Description Best For
expandVertical Expands 0% to 100% height Dropdown menus, expandable panels
expandHorizontal Expands 0% to 100% width Side panels, horizontal menus
expandCenter Expands uniformly from center Centered modals, overlays

Flip Animations ✨ NEW

Animation Description Best For
flipHorizontal 3D flip around X-axis Revealing information, flip cards
flipVertical 3D flip around Y-axis Card reveals, page transitions

Combined Animations ✨ NEW

Animation Description Best For
slideRotateBottom Slide from bottom + rotation Modern mobile UIs, action sheets
slideRotateTop Slide from top + rotation Notifications, top banners
slideScaleStart Slide from start + scale Navigation panels, side menus
slideScaleEnd Slide from end + scale Settings panels, detail views

πŸ“ Positioned Dialogs (v0.2.0)

Fine-grained control over dialog positioning with a 3Γ—3 grid system:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  topStart   β”‚  topCenter  β”‚   topEnd    β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ centerStart β”‚   center    β”‚  centerEnd  β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ bottomStart β”‚bottomCenter β”‚  bottomEnd  β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

DialogPosition Enum

Position Description
topStart Top-left (RTL: top-right)
topCenter Top-center
topEnd Top-right (RTL: top-left)
centerStart Center-left (RTL: center-right)
center Center of screen
centerEnd Center-right (RTL: center-left)
bottomStart Bottom-left (RTL: bottom-right)
bottomCenter Bottom-center
bottomEnd Bottom-right (RTL: bottom-left)
offScreen Outside screen (for slide-in)

PositionedTransitionType Enum

Type Description
slide Pure sliding motion
slideFade Slide with opacity fade
slideScale Slide with zoom effect
slideFadeScale All three combined
fade Opacity only (no movement)
scale Zoom only (no movement)
scaleFade Zoom with opacity (no movement)
bounce Bouncy entrance with elastic curve
elastic Elastic overshoot effect
zoom Smooth zoom with ease-out curve

Usage Example

// Corner to center with all effects
SuperDialog.showPositionedDialog<void>(
  context,
  (context) => MyDialog(),
  startPosition: DialogPosition.bottomEnd,
  endPosition: DialogPosition.center,
  transitionType: PositionedTransitionType.slideFadeScale,
  config: const SuperDialogConfig(
    openDuration: Duration(milliseconds: 400),
    openCurve: Curves.easeOutBack,
  ),
);

// Slide from off-screen to bottom
SuperDialog.showPositionedDialog<void>(
  context,
  (context) => BottomSheet(),
  startPosition: DialogPosition.offScreen,
  endPosition: DialogPosition.bottomCenter,
);

πŸ“– API Reference

SuperDialog Methods

// Standard dialog (barrier dismissible by default)
SuperDialog.showAnimatedDialog<T>(...);

// Full control dialog (barrier NOT dismissible by default)
SuperDialog.showAnimatedGeneralDialog<T>(...);

// Platform-adaptive dialog (iOS: bottom sheet style)
SuperDialog.showAnimatedAdaptiveDialog<T>(...);

// Positioned dialog with custom start/end positions (NEW)
SuperDialog.showPositionedDialog<T>(...);

SuperDialogConfig

Fine-tune animation timing:

const SuperDialogConfig({
  Duration openDuration = const Duration(milliseconds: 300),
  Duration closeDuration = const Duration(milliseconds: 300),
  Curve openCurve = Curves.easeInOut,
  Curve closeCurve = Curves.easeInOut,
});

Common Parameters

Parameter Type Default Description
context BuildContext required Build context
builder WidgetBuilder required Dialog content builder
animation DialogAnimation startToEnd Animation style
config SuperDialogConfig? null Timing configuration
constraints BoxConstraints? null Size constraints
barrierDismissible bool? true* Tap outside to dismiss
barrierColor Color? #B3000000 Barrier overlay color
barrierBlur double? null Gaussian blur amount
useSafeArea bool true Respect safe area
useRootNavigator bool? true Use root navigator
onDismissed VoidCallback? null Dismissal callback

*Default varies by method and platform

Positioned Dialog Parameters

Parameter Type Default Description
startPosition DialogPosition required Start position
endPosition DialogPosition required End position
transitionType PositionedTransitionType slideFade Transition effect

πŸ“š Examples

πŸ—‚οΈ Slide-In Drawer
SuperDialog.showAnimatedDialog(
  context,
  (context) => FractionallySizedBox(
    widthFactor: 0.7,
    alignment: AlignmentDirectional.centerStart,
    child: const NavigationDrawer(),
  ),
  animation: DialogAnimation.startToEnd,
  barrierColor: Colors.black26,
);
πŸ“ Positioned Corner Dialog
SuperDialog.showPositionedDialog(
  context,
  (context) => const NotificationCard(),
  startPosition: DialogPosition.topEnd,
  endPosition: DialogPosition.topEnd,
  transitionType: PositionedTransitionType.slideFade,
);
πŸ”„ Corner to Center Transition
SuperDialog.showPositionedDialog(
  context,
  (context) => const ModalDialog(),
  startPosition: DialogPosition.bottomStart,
  endPosition: DialogPosition.center,
  transitionType: PositionedTransitionType.slideFadeScale,
);
πŸ“‹ Bottom Action Sheet
SuperDialog.showPositionedDialog(
  context,
  (context) => const ActionSheet(),
  startPosition: DialogPosition.offScreen,
  endPosition: DialogPosition.bottomCenter,
  transitionType: PositionedTransitionType.slideFade,
);
βœ… Confirmation Modal
final confirmed = await SuperDialog.showAnimatedDialog<bool>(
  context,
  (context) => ConfirmDialog(
    onConfirm: () => Navigator.pop(context, true),
    onCancel: () => Navigator.pop(context, false),
  ),
  animation: DialogAnimation.centerScale,
  constraints: const BoxConstraints(maxWidth: 400),
);
πŸ“± Platform Adaptive
SuperDialog.showAnimatedAdaptiveDialog(
  context,
  (context) => const CrossPlatformDialog(),
);
🎯 Rotation Animation
SuperDialog.showAnimatedDialog(
  context,
  (context) => const FunNotification(),
  animation: DialogAnimation.rotateIn,
  config: const SuperDialogConfig(
    openDuration: Duration(milliseconds: 400),
    openCurve: Curves.easeOutBack,
  ),
);
🎈 Bounce Effect
SuperDialog.showAnimatedDialog(
  context,
  (context) => const SuccessDialog(),
  animation: DialogAnimation.bounceIn,
  config: const SuperDialogConfig(
    openDuration: Duration(milliseconds: 600),
  ),
);
πŸ”„ Flip Animation
SuperDialog.showAnimatedDialog(
  context,
  (context) => const FlipCard(),
  animation: DialogAnimation.flipVertical,
  config: const SuperDialogConfig(
    openDuration: Duration(milliseconds: 500),
    openCurve: Curves.easeInOut,
  ),
);
πŸ“ Expand Effect
SuperDialog.showAnimatedDialog(
  context,
  (context) => const ExpandingPanel(),
  animation: DialogAnimation.expandVertical,
  config: const SuperDialogConfig(
    openDuration: Duration(milliseconds: 350),
    openCurve: Curves.easeOutCubic,
  ),
);

πŸ§ͺ Demo App

🌐 Live Demo

[πŸ‘‰ Try it online: https://geniussystems24.github.io/super_dialog](https://geniussystems24.github.io/super_dialog)

The package includes a comprehensive example app with:

  • 50+ animation demonstrations (24 animation types)
  • 90 positioned combinations (9 positions Γ— 10 transition types)
  • Light/Dark theme support
  • Beautiful, modern UI with enhanced card design
  • Powered by go_router for modern navigation

Run Locally

cd example
flutter run

πŸ“‹ Requirements

Requirement Version
Dart SDK β‰₯3.10.3
Flutter β‰₯1.17.0

Supported Platforms

βœ… Android β€’ βœ… iOS β€’ βœ… Web β€’ βœ… Windows β€’ βœ… macOS β€’ βœ… Linux


πŸ“„ License

MIT License

Copyright (c) 2025 Genius Systems

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

Built with ❀️ by Genius Systems 24

Libraries

super_dialog
Super Dialog - A powerful animated dialog toolkit for Flutter.