The Complete Overlay Experience System for Flutter

flutter pub add modalora

import 'package:flutter/material.dart';
import 'package:modalora/modalora.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Modalora App',
      theme: ThemeData.dark(),
      home: const HomeScreen(),
    );
  }
}

// 1. Define global navigatorKey in your main.dart
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() {
  // 2. Configure Modalora once at app startup
  Modalora.configure(navigatorKey: navigatorKey);

  runApp(MaterialApp(
    navigatorKey: navigatorKey,
    home: const HomeScreen(),
  ));
}

// 3. Trigger anywhere without passing context!
void showWelcomeToast() {
  Modalora.snackbar(
    title: 'Welcome Back!',
    message: 'Triggered cleanly from service layer without BuildContext.',
  );
}

// Display a confirmation dialog with primary & destructive actions
final confirmed = await Modalora.dialog<bool>(
  title: 'Delete Repository',
  message: 'This will permanently remove the project and all history.',
  primaryActionText: 'Keep Project',
  onPrimaryAction: () => Navigator.pop(context, false),
  destructiveActionText: 'Delete Forever',
  onDestructiveAction: () => Navigator.pop(context, true),
  barrierBlur: 10.0,
  surfaceBlur: 14.0,
);

// 1. Open a classic Bottom Sheet (context is completely optional!)
await Modalora.bottomSheet(
  alignment: Alignment.bottomCenter, // Default bottom placement
  title: 'Filter Results',
  showDragHandle: true,
  child: const MyFilterFormWidget(),
);

// 2. Open a Top Sheet entering from screen top
await Modalora.bottomSheet(
  alignment: Alignment.topCenter, // Custom top placement!
  title: 'Quick Search & Commands',
  child: const MyCommandPaletteWidget(),
);

await Modalora.actionSheet(
  title: 'Share Project',
  message: 'Select your preferred export method.',
  actions: [
    ModaloraActionSheetItem(
      label: 'Copy Public Link',
      icon: Icons.link_rounded,
      onPressed: () => copyLink(),
    ),
    ModaloraActionSheetItem(
      label: 'Export as PDF',
      icon: Icons.picture_as_pdf_rounded,
      onPressed: () => exportPdf(),
    ),
    ModaloraActionSheetItem(
      label: 'Delete Access',
      icon: Icons.delete_outline_rounded,
      isDestructive: true,
      onPressed: () => deleteAccess(),
    ),
  ],
  cancelText: 'Dismiss',
);

final GlobalKey buttonKey = GlobalKey();

// Button in widget tree
ElevatedButton(
  key: buttonKey,
  onPressed: () {
    Modalora.popup(
      anchorKey: buttonKey,
      anchor: ModaloraPopupAnchor.bottom,
      title: 'Pro Feature',
      message: 'Upgrade your subscription to unlock unlimited bandwidth.',
    );
  },
  child: const Text('Inspect'),
);

ModaloraContextMenuRegion(
  items: [
    ModaloraMenuItem(
      title: 'Duplicate Layer',
      icon: Icons.copy_rounded,
      shortcut: '⌘D',
      onSelected: () => duplicate(),
    ),
    const ModaloraMenuDivider(),
    ModaloraMenuItem(
      title: 'Delete',
      icon: Icons.delete_outline_rounded,
      isDestructive: true,
      onSelected: () => delete(),
    ),
  ],
  child: const Card(child: Text('Right-click or long-press me!')),
);

Modalora.snackbar(
  title: 'Upload Finished',
  message: '3 files successfully synchronized.',
  position: ModaloraPosition.topCenter,
  duration: const Duration(seconds: 4),
  showProgressBar: true,
  actionLabel: 'VIEW',
  onActionPressed: () => openGallery(),
);

// 1. Show loading spinner and capture handle
final handle = Modalora.loading(
  title: 'Processing AI Generation...',
  message: 'Synthesizing neural model outputs.',
);

// 2. Perform async work
await generateContent();

// 3. Programmatically dismiss
await handle.dismiss();

await Modalora.adaptive(
  title: 'Account Settings',
  message: 'Manage your profile credentials and security.',
  child: const SettingsFormWidget(),
);

final customTheme = ModaloraThemeData.dark().copyWith(
  primaryColor: const Color(0xFF8B5CF6),
  surfaceColor: const Color(0xFF1E293B).withOpacity(0.8),
  borderRadius: BorderRadius.circular(24.0),
  dialogTheme: const ModaloraDialogTheme(
    barrierBlur: 12.0,
    surfaceBlur: 16.0,
  ),
  bottomSheetTheme: const ModaloraBottomSheetTheme(
    alignment: Alignment.bottomCenter,
    showDragHandle: true,
  ),
);

// 1. Direct One-Line 3D Hologram Modal Launch
await Modalora.hologram(
  title: '3D Hologram Engine',
  message: 'Drag or move cursor across the card to experience real-time 3D perspective gyro tilting and specular light reflections.',
  icon: Icons.view_in_ar_rounded,
  accentColor: const Color(0xFF06B6D4),       // Glowing cyan ring
  secondaryAccentColor: const Color(0xFF8B5CF6),// Ambient purple glow
  primaryActionText: 'Explore 3D',
  secondaryActionText: 'Dismiss',
  features: const [
    Modalora3DFeature(icon: Icons.threed_rotation_rounded, label: '3D Tilt'),
    Modalora3DFeature(icon: Icons.flare_rounded, label: 'Specular Glare'),
    Modalora3DFeature(icon: Icons.blur_on_rounded, label: 'Frosted Glass'),
  ],
  onPrimaryAction: () {
    print('3D Action Pressed!');
  },
);

// 2. Transform ANY Custom Widget into a 3D Perspective Modal
await Modalora.dialog3D(
  maxTilt: 0.3,
  perspective: 0.002,
  child: MyCustomGlassCardWidget(),
);

// 3. Reusable 3D Tilt Container for Any Screen or Grid
Modalora3DTiltCard(
  maxTilt: 0.25,
  perspective: 0.0018,
  glareIntensity: 0.4,
  glareColor: Colors.white,
  child: ProductCard(),
);

import 'package:flutter/material.dart';
import 'package:modalora/modalora.dart';

// 1. Define global navigatorKey for contextless modal dispatch
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() {
  // 2. Configure global default theme and navigatorKey
  Modalora.configure(
    navigatorKey: navigatorKey,
    theme: ModaloraThemeData.dark(),
  );

  runApp(const ModaloraDemoApp());
}

class ModaloraDemoApp extends StatelessWidget {
  const ModaloraDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey, // Attach navigator key
      title: 'Modalora Showcase',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final GlobalKey popupKey = GlobalKey();

    return Scaffold(
      appBar: AppBar(
        title: const Text('✨ Modalora Example App'),
        centerTitle: true,
      ),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 1. Glass Dialog Demo
              ElevatedButton.icon(
                icon: const Icon(Icons.chat_bubble_outline_rounded),
                label: const Text('1. Show Dialog'),
                onPressed: () {
                  Modalora.dialog(
                    title: 'Delete Document?',
                    message: 'Are you sure you want to permanently remove this file?',
                    primaryActionText: 'Keep File',
                    destructiveActionText: 'Delete',
                    onDestructiveAction: () {
                      Modalora.snackbar(
                        title: 'Deleted',
                        message: 'The document was removed.',
                        position: ModaloraPosition.topCenter,
                      );
                    },
                  );
                },
              ),
              const SizedBox(height: 14),

              // 2. Bottom Sheet Demo (Alignment.bottomCenter)
              ElevatedButton.icon(
                icon: const Icon(Icons.vertical_align_bottom_rounded),
                label: const Text('2. Open Bottom Sheet'),
                onPressed: () {
                  Modalora.bottomSheet(
                    alignment: Alignment.bottomCenter,
                    title: 'Bottom Sheet Filter',
                    showDragHandle: true,
                    child: const Padding(
                      padding: EdgeInsets.symmetric(vertical: 16.0),
                      child: Text('Smooth drag gesture with customizable alignment.'),
                    ),
                  );
                },
              ),
              const SizedBox(height: 14),

              // 3. Top Sheet Demo (Alignment.topCenter)
              ElevatedButton.icon(
                icon: const Icon(Icons.vertical_align_top_rounded),
                label: const Text('3. Open Top Sheet'),
                onPressed: () {
                  Modalora.bottomSheet(
                    alignment: Alignment.topCenter,
                    title: 'Top Sheet Command Bar',
                    child: const Padding(
                      padding: EdgeInsets.all(16.0),
                      child: Text('Enters seamlessly from the top edge!'),
                    ),
                  );
                },
              ),
              const SizedBox(height: 14),

              // 4. Anchor-Targeted Popup
              ElevatedButton.icon(
                key: popupKey,
                icon: const Icon(Icons.ads_click_rounded),
                label: const Text('4. Anchor Popup'),
                onPressed: () {
                  Modalora.popup(
                    anchorKey: popupKey,
                    anchor: ModaloraPopupAnchor.bottom,
                    title: 'Smart Tip',
                    message: 'Automatically flips if colliding with screen bottom!',
                  );
                },
              ),
              const SizedBox(height: 14),

              // 5. Toast Snackbar with Countdown
              ElevatedButton.icon(
                icon: const Icon(Icons.notifications_active_outlined),
                label: const Text('5. Trigger Toast'),
                onPressed: () {
                  Modalora.snackbar(
                    title: 'Project Saved',
                    message: 'All changes synchronized to cloud.',
                    showProgressBar: true,
                    position: ModaloraPosition.bottomCenter,
                  );
                },
              ),
              const SizedBox(height: 14),

              // 6. Orbital Loading Overlay with Handle Dismiss
              ElevatedButton.icon(
                icon: const Icon(Icons.hourglass_top_rounded),
                label: const Text('6. Orbital Loader'),
                onPressed: () async {
                  final handle = Modalora.loading(
                    title: 'Syncing Database...',
                    message: 'Please wait a moment.',
                  );

                  // Simulate 2.5 seconds asynchronous task
                  await Future.delayed(const Duration(milliseconds: 2500));
                  await handle.dismiss();

                  Modalora.snackbar(
                    title: 'Completed!',
                    message: 'Database synced successfully.',
                  );
                },
              ),
              const SizedBox(height: 14),

              // 7. 3D Hologram Tilt Modal (Direct 1-line package call)
              ElevatedButton.icon(
                icon: const Icon(Icons.view_in_ar_rounded),
                label: const Text('7. 3D Hologram Modal'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF06B6D4),
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  Modalora.hologram(
                    title: '3D Hologram Engine',
                    message: 'Real-time 3D perspective gyro tilting and specular light reflections.',
                    primaryActionText: 'Explore 3D',
                    secondaryActionText: 'Dismiss',
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}