super_dialog 0.5.1

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

↔️ Super Dialog

Beautiful Animated Dialogs for Flutter

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 21 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 Dependency-free core theme

---

📦 Installation

Add to your pubspec.yaml:

dependencies:
  super_dialog: ^0.6.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,
);

GeniusLink / super_core Design Theme

Version 0.6 uses the super_core 3.3 typography contract and keeps the first-class dialog theme sourced from super_core, which is now a runtime dependency. It provides the #4A7CFF accent, neutral light/dark surfaces, 4px spacing rhythm, compact 4/8/12px radii, and restrained overlay motion.

import 'package:super_core/super_core.dart' as core;

final typography = core.SuperTextTheme();

MaterialApp(
  theme: core.SuperMaterialThemeData.light(
    textTheme: typography,
    primaryTextTheme: typography,
  ),
  darkTheme: core.SuperMaterialThemeData.dark(
    textTheme: typography,
    primaryTextTheme: typography,
  ),
);

Use the ready-made surface when you want the package to style the dialog body as well as its route:

SuperDialog.showAnimatedDialog<void>(
  context,
  (context) => SuperDialogSurface(
    title: 'Post Journal Entry',
    subtitle: 'Review the details before continuing',
    icon: Icons.receipt_long_outlined,
    content: const Text('This entry will be marked as final.'),
    actions: [
      OutlinedButton(
        onPressed: () => Navigator.of(context).pop(),
        child: const Text('Cancel'),
      ),
      FilledButton(
        onPressed: () => Navigator.of(context).pop(),
        child: const Text('Post Entry'),
      ),
    ],
  ),
  animation: DialogAnimation.centerScale,
);

SuperDialogThemeData also controls the default barrier color, barrier blur, opening duration, and closing duration. Explicit method arguments still take precedence.

Import super_core with an alias because both libraries expose a symbol named SuperDialog. The package automatically reads the active SuperPalette; no duplicate color or spacing configuration is required. With super_core 3.3.0, textTheme and primaryTextTheme are required SuperTextTheme values. Typography is read from SuperMaterialThemeData, never from SuperThemeData.textTheme:

import 'package:super_core/super_core.dart' as core;
import 'package:super_dialog/super_dialog.dart';

final typography = core.SuperTextTheme();
final base = core.SuperMaterialThemeData.light(
  palette: core.SuperPalette.greenPalette,
  textTheme: typography,
  primaryTextTheme: typography,
);

MaterialApp(
  theme: base,
  home: const MyApp(),
);

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 (21 animation types)
• 90 positioned combinations (9 positions × 10 transition types)
• Light/Dark theme support
• Beautiful, modern UI with enhanced card design
• Powered by generated, strongly typed routes from go_router_builder

Run Locally

cd example
flutter pub get
dart run build_runner build --delete-conflicting-outputs
flutter run

The generated route file is committed. Run the builder again after changing route annotations.

---

📋 Requirements

Requirement	Version
Dart SDK	≥3.9.0
Flutter	≥3.32.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}