Animated Toast For Your Flutter Apps

Hi Guys. I am going to explain custom animated toast creation for your flutter apps. Let’s say you want to create a toast message with some animation, this article will be helpful.

This is the last output Toast.

Ok. Let’s start creating this custom toast. I’m going to create this example. If you need to add this toast to your flutter app, You need to add the void method that was mentioned further in this article with an animated widget.

Let’s create this example app. First I created a flutter project and added a bottom navigation bar with pages. First I created a home Screen as follows.

You can see I have added a TabBar widget for the bottom navigation tab creation and used TabBarView for the pages. There are four pages. I have only created a homepage for this toast demonstration. After that, I have created the homepage as follows.

First created titles with some different text widgets. I have created Carousel widget for the image scrolling at the top of the page. There is a separate widget for the other horizontal scrolling list, which was called ‘ CategoryItem ’. CategoryItem widget was created as follows.

Added Gesture detector to trigger our custom toast display method. It has the ontap() method. So I could call the toast method inside that. I have used a boolean value which is called isCompleted here to stop the duplicate toast display. If user tapped twice this widget, It is not triggered the toast again.

onTap: () {
        if (isCompleted) {
          setState(() {
            isCompleted = false;
          });
          showCustomToast(context, 'All your future needs are here!',
              const Color.fromARGB(255, 96, 205, 220), Colors.white);
          Future.delayed(const Duration(seconds: 3), (() {
            setState(() {
              isCompleted = true;
            });
          }));
        }
 }

The above if condition stop creating multiple toasts at multiple taps. The future function assign true value to the isCompleted value after the toast animation completion.

Ok. Let’s get into the main part of this article. The animated toast creation. First I created a separate animated widget that is used for this animation as follows.

First I initialized the animation controller and then initialized the animation with Tween<Offset> animation. During the init state method of this stateful widget starts the animation with ‘ _forwardController.forward(); ’. I had to use the listener of the animation controller to trigger the reverse method after the forward animation completion. So It will add some time after the first animation of the toast. First It will come to the center of the screen and hold for some time. After It will be started the reverse animation. So the time gap between these two animations is much needed. That is the reason behind the Future.delayed() function for the reverse animation. I have used flutter in built animated widget SlideTransition for this animation.

Now I am going to describe the main function I have created for this animated toast. The whole function code as follows.

First I have created an overlay for the toast and inserted it under the current context. After the animation is completed the overlay will be removed. I have used the previous animated toast widget as the parent widget for the toast. After I have added some content for its child content. So Parent widget does the animation work for the toast and the child widget handles the toast content such as the message body. That’s it. So we can call this method from anywhere from the app and create some custom toast messages with some sliding animation.

Hope you get the idea about this animated toast message.This is my approach for the animated sliding toast.If you have some different ideas please put some comments. Full source is available here https://github.com/Dineth95/custom_toast_app

Thanks for reading this article!. See you soon with new one. Please share and clap too!!