Flutter Sliding Toast #

A flutter sliding toast for displaying beautiful messages.

Breaking Changes #

The 1.4.0 version brings some breaking changes.

• 'SlidingToast' renamed to 'InteractiveToast' along with it's methods
  • 'show' renamed to 'slide'
  • 'showSuccess' renamed to 'slideSuccess'
  • 'showError' renamed to 'slideError'
• 'ToastSetting' renamed to 'SlidingToastSetting'
• 'disableMultiTapping' moved from 'show' ('slide' currently) function to 'ToastSetting' ('SlidingToastSetting' currently).

🎨 Screenshots #

🎯 Features #

• Show sliding toasts, modify sliding behaviors
• Show popup toasts, disable or modify fading and scaling behaviors
• Change toast's alignment positions and sliding toast's sliding directions
• Define animation and display duration, max height and width, padding
• Set title, leading, trailing widgets and disable the progressbar in sliding toast
• Use glassmorphism design or default success and error toast
• Dismiss the sliding toast by sliding it horizontally or vertically
• Dismiss the popup toast by sliding it horizontally
• Dismiss an individual or all toasts programmatically
• Pause the animation with long press and release it to continue
• Execute a function after the toast is tapped or disposed
• Disable Multiple tapping to execute 'onTap' callback only one time

⚙️ Getting Started #

Add the following line to pubspec.yaml:

dependencies:
  flutter_sliding_toast: ^1.4.0

🚀 Usage #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(color: Colors.white),
        title: const Text("Sliding & Popup Toast"),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(width: double.maxFinite),
            ElevatedButton(
              onPressed: () {
                InteractiveToast.slide(
                  context,
                  leading: leadingWidget(),
                  title: const Text(
                    "Hi there! I'm a sliding toast 😎. "
                    "Dismiss me by sliding upward.",
                  ),
                  trailing: trailingWidget(),
                  toastStyle: const ToastStyle(titleLeadingGap: 10),
                  toastSetting: const SlidingToastSetting(
                    animationDuration: Duration(seconds: 1),
                    displayDuration: Duration(seconds: 2),
                    toastStartPosition: ToastPosition.top,
                    toastAlignment: Alignment.topCenter,
                  ),
                );
              },
              child: textWidget("Sliding toast from top center"),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                InteractiveToast.pop(
                  context,
                  title: const Text(
                    "Hi! I'm a popup toast 🐺. "
                    "I have fading and scaling effect.",
                  ),
                  trailing: trailingWidget(),
                  toastSetting: const PopupToastSetting(
                    animationDuration: Duration(seconds: 1),
                    displayDuration: Duration(seconds: 3),
                    toastAlignment: Alignment.bottomCenter,
                  ),
                );
              },
              child: textWidget("Popup toast at bottom center"),
            ),
          ],
        ),
      ),
    );
  }

  Text textWidget(String text) => Text(
        text,
        style: const TextStyle(fontSize: 16),
      );

  Icon trailingWidget() => const Icon(
        Icons.person,
        color: Colors.deepPurple,
      );

  Container leadingWidget() {
    return Container(
      width: 40,
      height: 40,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.purple,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(.1),
            spreadRadius: 3,
            blurRadius: 4,
          ),
        ],
      ),
      alignment: Alignment.center,
      child: const Text(
        "🦄",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

❤️ Additional information #

Pull requests are welcomed!

If you encounter any problems or you have any ideas, feel free to open an issue:

• Form for bugs
• Form for feature requests