Flutter Toast Message Animation: A Step-by-Step Guide

Are you bored with the causal look of the toast message and looking for a styled toast message instead?

Are you looking for a way to show toast message in Flutter with decoration and animation?

In this case, Flutter Styled Toast is what you’re looking for!

Flutter styled toast is a package that allows you to customize toast messages with a series of animation to beautify their look and make them more attractive.

We know that there are several ways to display a feedback message to the users and that toast is a famous one. So why not making it attractive and unique?

In this post, we’ll go through several examples that’ll teach you how to show toast in Flutter and how to implement Flutter toast animation.

Installing the package

In order to use any package in Flutter, you need to add it to your project. You can do so by typing a command in the terminal

flutter pub add flutter_styled_toast

or adding it manually to pubspec.yaml file in the dependencies section

flutter_styled_toast: ^2.1.3

Once done, run flutter pub get.

After that, you need to import the library in the dart file where you’ll implement the toast message.

import 'package:flutter_styled_toast/flutter_styled_toast.dart';

That’s it, your project is now set up.

Flutter Styled Toast Parameters

Parameter Description
msg String. The text that appears inside the toast.
context
BuildContext (If you don’t wrap app with StyledToast, context is required, otherwise, is not)
duration Duration (default 2.3s)(When set [duration] to Duration.zero, toast won’t dismiss automatically)
animDuration
Duration (default 400 milliseconds, animDuration * 2 <= duration, conditions must be met for toast to display properly)
position StyledToastPosition (default StyledToastPosition.bottom)
backgroundColor Color (default Color(0x99000000))
borderRadius BorderRadius (BorderRadius.circular(5.0))
textStyle
TextStyle (default TextStyle(fontSize: 16.0,fontWeight: FontWeight.normal,color: Colors.white))
shapeBorder
ShapeBorder (default RoundedRectangleBorder(borderRadius: borderRadius))
onDismiss
VoidCallback (Invoked when toast dismiss)
textDirection TextDirection (default TextDirection.ltr)
toastPosition  
toastAnimation
StyledToastAnimation (default StyledToastAnimation.fade)
textAlign TextAlign (default TextAlign.center)
alignment
AlignmentGeometry (default Alignment.center)
axis Axis (default Axis.vertical)
curve Curve (default Curves.linear)

Flutter Styled Toast Message Example

Since there are several styles that can be applied for toast messages, I’ll demonstrate them separately to show you how they differ from each other.

Normal Toast

showToast('This is a normal toast',
    context: context,
    axis: Axis.horizontal,
    alignment: Alignment.center,
    position: StyledToastPosition.bottom);

Permanent Toast

showToast(
  'This is a permanent toast',
  context: context,
  duration: Duration.zero,
);

Full Width Toast

showToast(
  'This is  full width toast',
  context: context,
  axis: Axis.horizontal,
  alignment: Alignment.center,
  position: StyledToastPosition.bottom,
  borderRadius: BorderRadius.zero,
  toastHorizontalMargin: 0,
  fullWidth: true,
); 

Custom Border Radius Toast

showToast('This is Custom Border Radious Toast',
    context: context,
    textStyle: TextStyle(fontSize: 20.0, color: Colors.red),
    backgroundColor: Colors.yellow,
    textPadding:
        EdgeInsets.symmetric(vertical: 20.0, horizontal: 30.0),
    borderRadius: BorderRadius.vertical(
        top: Radius.elliptical(10.0, 20.0),
        bottom: Radius.elliptical(10.0, 20.0)),
    textAlign: TextAlign.justify,
    textDirection: TextDirection.rtl);

Toast with Fading Animation

showToast('This is toast with fading animation',
    context: context,
    animation: StyledToastAnimation.fade,
    curve: Curves.linear,
    reverseCurve: Curves.linear);

Toast with Sliding From Top Animation

showToast('This is toast with sliding from top animation',
    context: context,
    animation: StyledToastAnimation.slideFromTop,
    reverseAnimation: StyledToastAnimation.slideToTop,
    position: StyledToastPosition.top,
    startOffset: Offset(0.0, -3.0),
    reverseEndOffset: Offset(0.0, -3.0),
    duration: Duration(seconds: 4),
    animDuration: Duration(seconds: 1),
    curve: Curves.elasticOut,
    reverseCurve: Curves.fastOutSlowIn);

Toast with Sliding From Left Animation

showToast('This is toast with slide from left animation',
    context: context,
    animation: StyledToastAnimation.slideFromLeft,
    reverseAnimation: StyledToastAnimation.slideToTop,
    position: StyledToastPosition.top,
    startOffset: Offset(-1.0, 0.0),
    reverseEndOffset: Offset(-1.0, 0.0),
    duration: Duration(seconds: 4),
    animDuration: Duration(seconds: 1),
    curve: Curves.elasticOut,
    reverseCurve: Curves.fastOutSlowIn);

Toast with Sliding From Right Animation

showToast('This is toast with slide from right animation',
    context: context,
    animation: StyledToastAnimation.slideFromRight,
    reverseAnimation: StyledToastAnimation.slideToRight,
    position: StyledToastPosition.top,
    startOffset: Offset(1.0, 0.0),
    reverseEndOffset: Offset(1.0, 0.0),
    animDuration: Duration(seconds: 1),
    duration: Duration(seconds: 4),
    curve: Curves.linearToEaseOut,
    reverseCurve: Curves.fastOutSlowIn);

Toast with Scale Animation

showToast('This is toast with scale animation',
    context: context,
    animation: StyledToastAnimation.scale,
    reverseAnimation: StyledToastAnimation.fade,
    position: StyledToastPosition.center,
    animDuration: Duration(seconds: 1),
    duration: Duration(seconds: 4),
    curve: Curves.elasticOut,
    reverseCurve: Curves.linear);

Toast with Fade Scale Animation

showToast('This is fade scale animated toast',
    context: context,
    animation: StyledToastAnimation.fadeScale,
    reverseAnimation: StyledToastAnimation.scaleRotate,
    position: StyledToastPosition.center,
    animDuration: Duration(seconds: 1),
    duration: Duration(seconds: 4),
    curve: Curves.linear,
    reverseCurve: Curves.linear);

Toast with Fade Rotation Animation

showToast('This is toast with fade & rotation animation',
    context: context,
    backgroundColor: Colors.deepPurple,
    axis: Axis.horizontal,
    position: StyledToastPosition.bottom,
    duration: const Duration(seconds: 5),
    curve: Curves.bounceIn,
    animDuration: const Duration(seconds: 2),
    animation: StyledToastAnimation.fadeRotate);

 

Conclusion

This brings an end to this tutorial where we learnt various ways to add styling and animation to flutter toast messages. We always look for ways to make our apps unique and outstanding therefore considering adding stylish and decorated toast messages will be very helpful. Of course considering other stuff such as decorative texts and buttons might also do the work.

I hope I was able to guide you how to create styled toast message and apply animation to it in your Flutter apps.

Please don’t hesitate to support this blog with a like and share if you find its content useful. If you wish to learn more about Flutter programming, you can access a whole Flutter category with plenty of useful topics related to it.

Also, don’t forget to like and share my Facebook page, share the post with those who care to learn, and subscribe to my blog to be one of the firsts to know about my newest posts!

Thank you and happy coding!

Oh hi there!
It’s nice to meet you.

Sign up to receive awesome content in your inbox, every month.

Let's Do This!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top