β¨ 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 |
β
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