pop_this 1.0.0 copy "pop_this: ^1.0.0" to clipboard
pop_this: ^1.0.0 copied to clipboard

A powerful and customizable Flutter package for managing popups, toasts, and overlays with support for animations, stacking, and timers.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return OverlaySupport.global(
          child: MaterialApp(
            title: 'PopThis Example',
            theme: ThemeData(
              primarySwatch: Colors.blue,
              useMaterial3: true,
            ),
            home: const MyHomePage(),
          ),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green.shade50,
      appBar: AppBar(
        title: const Text('PopThis Example'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Text(
                'Basic Examples',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  PopThis.pop(
                    context: context,
                    child: Container(
                      padding: const EdgeInsets.all(20),
                      constraints: const BoxConstraints(maxWidth: 300),
                      child: const Text(
                        'Simple Popup\n\nTap outside to dismiss',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                  );
                },
                child: const Text('Simple Popup'),
              ),
              const SizedBox(height: 12),
              ElevatedButton(
                onPressed: () {
                  PopThis.pop(
                    context: context,
                    duration: const Duration(seconds: 5),
                    showTimer: true,
                    child: Container(
                      padding: const EdgeInsets.all(20),
                      constraints: const BoxConstraints(maxWidth: 300),
                      child: const Text(
                        'Auto Dismiss with Timer\n\nThis popup will automatically close in 5 seconds',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                  );
                },
                child: const Text('Popup with Timer'),
              ),
              const SizedBox(height: 12),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  PopThis.showSuccessOverlay(
                    successMessage: 'Operation Successful!',
                    duration: const Duration(seconds: 2),
                  );
                },
                child: const Text('Success Overlay'),
              ),
              const SizedBox(height: 12),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  PopThis.showErrorOverlay(
                    errorMessage: 'Something went wrong!',
                    duration: const Duration(seconds: 2),
                  );
                },
                child: const Text('Error Overlay'),
              ),
              const SizedBox(height: 32),
              const Text(
                'Advanced Examples',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  PopThis.pop(
                    context: context,
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Text(
                            'First Popup',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 20),
                          const Text(
                            'You can stack multiple popups!\nClick the button below to open another popup.',
                            textAlign: TextAlign.center,
                          ),
                          const SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: () {
                              PopThis.pop(
                                context: context,
                                child: Padding(
                                  padding: const EdgeInsets.all(20.0),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      const Text(
                                        'Second Popup (Stacked)',
                                        style: TextStyle(
                                          fontSize: 18,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      const SizedBox(height: 20),
                                      const Text(
                                        'Notice the back button appeared!\nYou can go back to the previous popup.',
                                        textAlign: TextAlign.center,
                                      ),
                                      const SizedBox(height: 20),
                                      ElevatedButton(
                                        onPressed: () {
                                          PopThis.pop(
                                            context: context,
                                            child: Container(
                                              padding: const EdgeInsets.all(20),
                                              constraints: const BoxConstraints(
                                                maxWidth: 250,
                                              ),
                                              child: const Text(
                                                'Third Popup!\n\nUse the back button to navigate through the popup stack.',
                                                textAlign: TextAlign.center,
                                              ),
                                            ),
                                          );
                                        },
                                        child: const Text('Open Third Popup'),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            child: const Text('Open Another Popup'),
                          ),
                        ],
                      ),
                    ),
                  );
                },
                child: const Text('Stacked Popups'),
              ),
              const SizedBox(height: 12),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.purple,
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  PopThis.pop(
                    context: context,
                    popBackgroundColor: Colors.purple.shade50,
                    dismissBarrierColor: Colors.purple.withValues(alpha: 0.5),
                    shouldBlurBackgroundOverlayLayer: true,
                    popUpAnimationDuration: 0.6,
                    hasShadow: true,
                    child: Container(
                      padding: const EdgeInsets.all(20),
                      constraints: const BoxConstraints(maxWidth: 300),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            Icons.palette,
                            size: 50,
                            color: Colors.purple,
                          ),
                          const SizedBox(height: 16),
                          const Text(
                            'Custom Styled Popup',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.purple,
                            ),
                          ),
                          const SizedBox(height: 12),
                          const Text(
                            'This popup has custom colors, blur effect, and custom animation duration!',
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ),
                  );
                },
                child: const Text('Custom Styled Popup'),
              ),
              const SizedBox(height: 12),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.orange,
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  PopThis.pop(
                    context: context,
                    popPositionOffset: const Offset(20, 100),
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: Colors.orange.shade50,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      constraints: const BoxConstraints(maxWidth: 250),
                      child: const Text(
                        'Positioned Popup\n\nThis popup appears at a custom position on the screen!',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  );
                },
                child: const Text('Positioned Popup'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
0
likes
160
points
94
downloads

Publisher

unverified uploader

Weekly Downloads

A powerful and customizable Flutter package for managing popups, toasts, and overlays with support for animations, stacking, and timers.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

assorted_layout_widgets, circular_countdown_timer, flutter, flutter_animate, icons_plus, lucide_icons, overlay_support, pausable_timer, s_button, sizer, soundsliced_dart_extensions, soundsliced_tween_animation_builder, states_rebuilder_extended

More

Packages that depend on pop_this