Flutter Styled Toast: Custom Animations for Engaging Notifications

Flutter has become a go-to framework for developing beautiful and functional apps for both Android and iOS. Toast notifications are a staple in this domain, providing quick, non-intrusive feedback to users. Flutter, a versatile UI toolkit for building natively compiled applications, offers a way to enhance this aspect of user interaction through customizable toast messages.

In this blog, we'll dive into the intricacies of implementing the Flutter Styled Toast package in your Flutter app, enabling you to easily create toast messages with a flair of sophistication and interactivity.

Understanding Toast Notifications

Toast messages are transient pop-ups that relay information to users seamlessly. They appear and disappear automatically, requiring no user input. These notifications often confirm actions, such as saving a file or liking a post, with an icon indicating liked status or other visual cues. In Flutter apps, toast messages can be elevated to an art form, with the ability to customize toast appearances, including animations, styles, and layouts, to a high degree.

Overview of Flutter Styled Toast Package

The Flutter Styled Toast package is a Dart 3 compatible library that takes the concept of regular toast notifications and elevates it with many styling and animation options. With this package, developers can beautify toast notifications beyond the default capabilities, incorporating custom animations and even global configuration options for consistent styling across an app.

The package supports various platforms, including Android, iOS, Linux, macOS, web, and Windows. It is a versatile choice for Flutter developers aiming to achieve a fantastic effect with their toast presentations. Whether you're looking to implement a regular toast with a twist or a styled toast with complex animations, this package provides the tools necessary to create a memorable user experience.

Setting Up the Flutter Styled Toast Package

To begin enhancing your Flutter app with rich toast notifications, the first step is to set up the package. This process involves adding the package to your project and ensuring all necessary dependencies are in place. Let's walk through the installation and setup process so you can start crafting those eye-catching toast messages.

Installing the Package

The installation of the package is straightforward. You need to add the package to your pubspec.yaml file under the dependencies section. Ensure you have the latest version compatible with your Flutter SDK to take advantage of all the features, including null safety and the latest fixes.

Copy
dependencies:
  flutter_styled_toast: ^2.2.1

After adding the dependency, run the following command in your terminal to get the package:

flutter pub get

This command will download and integrate the package into your Flutter app, making it ready for use.

Importing Necessary Dependencies

With the package installed, the next step is to import it into the files where you'll be using the styled toast notifications. Add the following import statement at the top of your Dart file:

Creating Your First Toast Message

You can create your first toast message once the package is installed and imported. Flutter makes it easy to display a toast message with just a few lines of code. Let's start by using the default toast style provided by the package and then move on to customizing the toast's appearance to fit your app's theme and style.

Utilizing the Default Toast Style

To show a toast message using the default style, you can use the showToast function provided by the package. This function requires a message and a BuildContext to display the toast within the current context of your app. Here's how you can display a simple "hello-styled toast" message:

This will display a normal toast with the default settings, which includes a default duration and a fade animation. The toast will appear at the bottom of the screen and dismiss automatically after a few seconds.

Customizing Toast Appearance

The true power of this package lies in its ability to customize toast notifications highly. You can change the toast's position, animation, duration, background color, text style, and more.

For instance, if you want to display a toast with a custom animation and a different background color, you could do something like this:

In the above example, the toast message will appear in the center of the screen with a scale animation when showing and a fade animation when dismissing. The toast will have a blue accent background with white text and stay visible for 4 seconds, with the animation lasting 1 second.

Implementing Custom Animations in Toast

Animations add a layer of polish and sophistication to your app's user interface, and this package allows for extensive customization of animations in toast messages. Whether you're aiming for a subtle fade or an eye-catching slide, custom animations can be tailored to match the style and tempo of your app.

Custom Animation Controller showToast

To achieve a unique visual effect, you can use a custom animation controller with the showToast function. This allows you to define your animation sequence when the toast widget appears on the screen. You can specify the animation duration, curve, and even combine different animations to achieve an amazing effect.

Here's an example of how you might set up a custom slide transition animation for your toast message:

This snippet defines a SlideTransition that animates the toast's position from off-screen to its final position at the bottom. The customController is used to control the timing and progression of the animation.

Custom Reverse Animation for Toast Dismissal

Just as important as the entrance animation is the toast's exit, or reverse animation. The package allows you to define a custom reverse animation that plays when the toast is dismissed. This can help maintain consistency in your app's animation style and provide a seamless user experience.

Here's an example of how to implement a custom reverse animation:

In this example, we use a FadeTransition for the reverse animation, gradually fading out the toast message. The reverseCurve is set to Curves.easeInOut for a smooth transition effect.

Advanced Toast Customizations

Flutter developers often seek to provide a consistent look and feel throughout their app; toast notifications should be no exception. The package offers advanced customization options, including global configurations and the ability to use custom widgets. These features enable you to maintain a uniform style for all toast messages and to create complex layouts within your toasts.

Global Configuration for Toasts

Setting a global configuration for your toasts ensures that you have a consistent style across your entire application. This can be done by wrapping your app with the StyledToast widget, which allows you to set default values for toast properties such as locale, text style, background color, and animations.

Here's an example of how to set up a global configuration for your toasts:

With this setup, any toast message displayed in your app will inherit these global styles unless overridden in the specific toast call.

Highly Customize Toast with Custom Widgets

Sometimes, a simple text message is not enough, and you should include images, icons, or even interactive elements within your toast notifications. Using this package you can customize toast messages by using custom widgets.

For example, if you want to create a toast message that includes an icon indicating liked status and a custom animation, you could do the following:

In this custom widget, we've created a styled toast with an icon and text, a scale animation when the toast appears, and a fade animation when it disappears. This level of customization allows you to create informative and visually integrated toasts with the rest of your app's design.

Handling Toasts with Icons and Animations

Incorporating icons and animations into toast messages can significantly enhance the user experience by providing visual cues and engaging feedback. This Package includes icons that can interact with user actions, such as toggling the folding of a section or indicating a liked status.

Adding an Icon to Toggle Folding

An icon to toggle folding can be helpful in a toast message, especially if you want to present more detailed information to the user without cluttering the interface. Users can expand or collapse the toast by tapping the icon to show or hide additional content.

Here's an example of how you might implement a toast with an icon that toggles the folding of the section:

In this code snippet, tapping the icon will toggle the isExpanded state, which can then be used to determine the content and size of the toast.

Icon Indicating Liked Status with Custom Animation

An icon indicating liked status is a common feature in social media apps, where users can quickly react to content. By adding custom animation to this icon within a toast message, you can provide immediate and delightful feedback to user interactions.

Here's how you might add an animated liked status icon to a toast message:

In this example, the toast contains a text message and a heart icon, with a scale transition animation that gives a bounce effect, emphasizing the liked status.

Conclusion

Incorporating the Flutter Styled Toast package into your Flutter app opens up a world of possibilities for enhancing user feedback with toast messages. From the simplicity of displaying a default toast to the complexity of crafting a highly customized toast with intricate custom animations and widgets, the package provides the tools necessary to create a polished and cohesive user experience.

import 'package:flutter_styled_toast/flutter_styled_toast.dart';

showToast(
  "hello styled toast",
  context: context,
);

showToast(
  "This is a custom toast message",
  context: context,
  position: StyledToastPosition.center,
  duration: Duration(seconds: 4),
  animDuration: Duration(seconds: 1),
  curve: Curves.elasticOut,
  reverseCurve: Curves.linear,
  backgroundColor: Colors.blueAccent,
  textStyle: TextStyle(color: Colors.white, fontSize: 18),
  animation: StyledToastAnimation.scale,
  reverseAnimation: StyledToastAnimation.fade,
);

AnimationController customController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 500),
);

showToast(
  'This is a toast with custom animation',
  context: context,
  animationBuilder: (BuildContext context, AnimationController controller, Duration duration, Widget child) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset(0, 1), // Start from the bottom of the screen
        end: Offset(0, 0), // End at its final position
      ).animate(controller),
      child: child,
    );
  },
  onInitState: (Duration toastDuration, Duration animDuration) async {
    try {
      await customController.forward().orCancel;
    } on TickerCanceled {}
  },
);

showToast(
  'This is a toast with custom reverse animation',
  context: context,
  reverseAnimation: StyledToastAnimation.fade,
  reverseCurve: Curves.easeInOut,
  reverseAnimBuilder: (BuildContext context, AnimationController controller, Duration duration, Widget child) {
    return FadeTransition(
      opacity: Tween<double>(
        begin: 1.0, // Fully visible
        end: 0.0,  // Fully transparent
      ).animate(controller),
      child: child,
    );
  },
);

StyledToast(
  locale: const Locale('en', 'US'), // Set this parameter to your locale
  textStyle: TextStyle(fontSize: 16.0, color: Colors.white), // Default text style for toasts
  backgroundColor: Color(0x99000000), // Default background color for toasts
  borderRadius: BorderRadius.circular(5.0), // Default border radius
  textPadding: EdgeInsets.symmetric(horizontal: 17.0, vertical: 10.0), // Default padding for text
  // ... other properties
  child: MaterialApp(
    title: 'Your App Title',
    home: YourHomePage(),
  ),
);

showToastWidget(
  Container(
    padding: EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(5.0),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.thumb_up, color: Colors.white),
        SizedBox(width: 8.0),
        Text('Liked!', style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
  context: context,
  animation: StyledToastAnimation.scale,
  reverseAnimation: StyledToastAnimation.fade,
  position: StyledToastPosition.center,
  animDuration: Duration(seconds: 1),
  duration: Duration(seconds: 4),
);

// Assume you have a boolean variable to track the folding status
bool isExpanded = false;

showToastWidget(
  GestureDetector(
    onTap: () {
      // Toggle the expanded state
      setState(() {
        isExpanded = !isExpanded;
      });
      // Update the toast to reflect the new state
      showToastWidget(
        // Your custom widget here
      );
    },
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Your message and icon here
        Icon(
          isExpanded ? Icons.expand_less : Icons.expand_more,
          color: Colors.white,
        ),
      ],
    ),
  ),
  context: context,
  // Other toast properties
);

showToastWidget(
  Container(
    padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
    decoration: BoxDecoration(
      color: Colors.redAccent,
      borderRadius: BorderRadius.circular(5.0),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('You liked this!', style: TextStyle(color: Colors.white)),
        SizedBox(width: 8.0),
        Icon(Icons.favorite, color: Colors.white),
      ],
    ),
  ),
  context: context,
  position: StyledToastPosition.bottom,
  animDuration: Duration(milliseconds: 500),
  duration: Duration(seconds: 2),
  animationBuilder: (BuildContext context, AnimationController controller, Duration duration, Widget child) {
    return ScaleTransition(
      scale: CurvedAnimation(
        parent: controller,
        curve: Curves.elasticOut,
      ),
      child: child,
    );
  },
);