SnackNLoad

SnackNLoad is a Flutter package that provides a powerful, customizable, and easy-to-use solution for loading indicators and top snackbars in your Flutter application. With SnackNLoad, you can manage loading states and display success, error, or informational snackbars with ease.

Pub.dev Link: https://pub.dev/packages/snacknload

   

snacknload

Features

📚 Detailed Documentation

For complete guides on specific features, please refer to:

🎨 Enhanced UI (NEW!)

  • Rich Snackbars with glassmorphism, progress bars, and swipe-to-dismiss (like GetX)
  • Modern Loading indicators with blur effects and smooth animations
  • Interactive Elements with tap callbacks and custom widgets
  • Premium Design with gradients, shadows, and micro-interactions

🎓 Tutorial & Tooltips (NEW!)

  • Interactive Onboarding - Guide users through your app features
  • Widget Highlighting - Spotlight specific UI elements with pulse animations
  • Smart Positioning - Auto-positioning or manual control for tooltips
  • Customizable Steps - Full control over colors, icons, text, and behavior
  • Progress Tracking - Built-in progress bar and step navigation
  • Auto-Advance - Optional automatic progression between steps

📦 Core Features

  • Multiple loading styles and indicators.
  • Customizable snackbars with different types (success, error, info, warning).
  • Flexible masking options during loading.
  • Custom animations for loading indicators.
  • Support for toast notifications at different positions (top, center, bottom).
  • Easy integration and configuration.
  • Styled snackbar with position options of top, center, bottom.
  • Show dialog with customization options and adaptive support.
  • All features are accessible after initialization and no need to provide context because snacknload uses their in-built global context.

Installation

Add snacknload to your pubspec.yaml file:

dependencies:
  snacknload: ^1.0.2

Then, run:

flutter pub get

Getting Started

1. Import the Package

import 'package:snacknload/snacknload.dart';

2. Configure SnackNLoad

Configure SnackNLoad in your main() function:

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

void configLoading() {
  SnackNLoad.instance
    ..displayDuration = const Duration(milliseconds: 2000)
    ..indicatorType = IndicatorType.fadingCircle
    ..loadingStyle = LoadingStyle.dark
    ..indicatorSize = 45.0
    ..radius = 10.0
    ..progressColor = Colors.yellow
    ..backgroundColor = Colors.green
    ..indicatorColor = Colors.yellow
    ..textColor = Colors.yellow
    ..maskColor = Colors.blue.withOpacity(0.5)
    ..userInteractions = true
    ..dismissOnTap = false
    ..customAnimation = CustomAnimation();
}

3. Initialize SnackNLoad in Your App

Use SnackNLoad.init() in the builder property of your MaterialApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackNLoad Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'SnackNLoad Example'),
      builder: SnackNLoad.init(),
    );
  }
}

4. Use SnackNLoad in Your Widgets

Show a Loading Indicator

SnackNLoad.show(status: 'Loading...', maskType: MaskType.black);

Dismiss the Loading Indicator

SnackNLoad.dismiss();

Show a Success Snackbar

SnackNLoad.showSuccess('Operation Successful!');

Show an Error Snackbar

SnackNLoad.showError('Something went wrong!');

Show an Informational Snackbar

SnackNLoad.showInfo('Here is some information.');

Display a Toast

SnackNLoad.showToast('This is a toast message.');

Show a Top Snackbar

SnackNLoad.showSnackBar(
  'Welcome in year 2025!\nMay this year fulfill your dreams and bring happiness.',
  type: SnackNLoadType.success,
  title: "Hello",
  showIcon: false,
  position: SnackNLoadPosition.top,
);

🎨 Enhanced UI Features (NEW!)

Enhanced Loading with Glassmorphism

Note (v3.0.0+): Glassmorphism is now disabled by default. Set useGlassmorphism: true to enable it.

SnackNLoad.showEnhancedLoading(
  status: 'Loading...',
  maskType: MaskType.black,
  useBlur: true,              // Blur backdrop effect
  useGlassmorphism: true,     // MUST be set to true for glass effect
);

Enhanced Snackbar with Rich Features

Note (v3.0.0+): useGlassmorphism defaults to false. Enable it to see the glass effect.

SnackNLoad.showEnhancedSnackBar(
  '🎉 Operation completed successfully!',
  title: 'Success',
  type: SnackNLoadType.success,
  position: SnackNLoadPosition.top,
  showProgressBar: true,          // Auto-dismiss progress bar
  duration: Duration(seconds: 4),
  enableSwipeToDismiss: true,     // Swipe to dismiss
  useGlassmorphism: true,         // Glassmorphism effect
  showCloseButton: true,          // Show close button
  onTap: () {                     // Tap callback
    print('Snackbar tapped!');
  },
);

Interactive Snackbar with Custom Widgets

SnackNLoad.showEnhancedSnackBar(
  'You have a new message',
  title: 'Notification',
  type: SnackNLoadType.info,
  onTap: () => Navigator.push(...),
  trailing: Icon(
    Icons.arrow_forward_ios,
    color: Colors.white,
    size: 16,
  ),
);

🎓 Tutorial & Tooltips (NEW!)

Basic Tutorial

// 1. Create GlobalKeys for widgets
final GlobalKey homeKey = GlobalKey();
final GlobalKey searchKey = GlobalKey();

// 2. Assign keys to widgets
IconButton(
  key: homeKey,
  icon: Icon(Icons.home),
  onPressed: () {},
)

// 3. Create and show tutorial
final controller = TutorialController(
  steps: [
    TutorialStep(
      id: 'home',
      title: 'Home Button',
      description: 'Tap here to return to the home screen',
      targetKey: homeKey,
      icon: Icons.home_rounded,
    ),
    TutorialStep(
      id: 'search',
      title: 'Search',
      description: 'Find anything in the app',
      targetKey: searchKey,
      icon: Icons.search_rounded,
    ),
  ],
);

SnackNLoad.showTutorial(
  controller: controller,
  onComplete: () => print('Tutorial completed!'),
);

Advanced Tutorial with Custom Styling

TutorialStep(
  id: 'custom',
  title: 'Custom Step',
  description: 'This step has custom colors and auto-advances',
  targetKey: myKey,
  backgroundColor: Color(0xFF8B5CF6),
  textColor: Colors.white,
  icon: Icons.star_rounded,
  showPulse: true,
  autoAdvanceDuration: Duration(seconds: 3),
  dismissOnTapOutside: true,
  onShow: () => print('Step shown'),
  onComplete: () => print('Step completed'),
)

📖 See TUTORIAL_FEATURE.md for complete documentation and examples.

📖 For detailed documentation on enhanced UI features, see ENHANCED_UI.md

Custom Animation

Create a custom animation for the loading indicator by extending SnackNLoadLoadingAnimation:

class CustomAnimation extends SnackNLoadLoadingAnimation {
  @override
  Widget buildWidget(
    Widget child,
    AnimationController controller,
    AlignmentGeometry alignment,
  ) {
    return Opacity(
      opacity: controller.value,
      child: RotationTransition(
        turns: controller,
        child: child,
      ),
    );
  }
}

🧩 Enhanced Dialog System (NEW!)

Multiple Dialog Styles

Choose from Material, Cupertino, or our new Enhanced custom style!

// Enhanced Style (Custom UI)
SnackNLoad.showOkDialog(
  title: 'Enhanced',
  content: 'This uses the new Enhanced style!',
  dialogType: SnackNLoadDialogType.enhanced,
);

// iOS Style
SnackNLoad.showOkDialog(
  title: 'Cupertino',
  content: 'This looks like iOS!',
  dialogType: SnackNLoadDialogType.cupertino,
);

Convenience Methods

Simple OK Dialog

SnackNLoad.showOkDialog(
    title: 'Success',
    content: 'Operation completed!',
    onOk: () => print('OK'),
);

Confirm/Cancel Dialog

SnackNLoad.showDecisiveDialog(
    title: 'Delete?',
    content: 'Are you sure?',
    confirmLabel: 'Delete',
    onConfirm: () => deleteItem(),
    onCancel: () => print('Cancelled'),
);

Full Screen Dialog

SnackNLoad.showFullScreenDialog(
    title: 'Details',
    content: DetailsPage(),
);

Advanced Usage

Loading Styles

Choose from multiple loading styles:

SnackNLoad.instance.loadingStyle = LoadingStyle.dark;

Toast Positions

Set toast position to top, center, or bottom:

SnackNLoad.instance.position = SnackNLoadPosition.top;

Indicator Types

Switch between various indicator types:

SnackNLoad.instance.indicatorType = IndicatorType.wave;

Mask Types

Control user interactions during loading:

SnackNLoad.instance.maskType = MaskType.black;

Example Application

Check out the full example in the example folder to explore all the features.

Acknowledgments

SnackNLoad is inspired by and extends the functionality of flutter_easyloading. We appreciate the contributions of the original package’s authors, which laid the groundwork for this project.

License

SnackNLoad is released under the MIT License.

Contributing

We welcome contributions! Please feel free to open issues or submit pull requests.

Connect with me:

Libraries

snacknload