super_dialog 0.2.0

A powerful, flexible, and beautifully animated dialog toolkit for Flutter. Create stunning dialogs with smooth slide, scale, and fade 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 6 Pre-built animation styles Slide from any direction Scale & fade effects RTL-aware transitions	📍 Positioned Dialogs 9 screen positions (3×3 grid) Custom start & end positions 7 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.2.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

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
centerScale	Scales from 92% with fade	Confirmations, important alerts
centerFade	Simple fade in/out	Toasts, status messages

---

📍 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)

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(),
);

---

🧪 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:

• 18+ animation scenarios (6 animation types × 3 variants)
• 63 positioned combinations (9 positions × 7 transition types)
• Light/Dark theme support
• Beautiful, modern UI

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}