×
×

Spread the love

Flutter Motion Toast / Styled Toast

Motion toast is nothing but a toast message in flutter beautifully styled & designed with animations. It works completely similar to toast message. The only difference is, toast message looks simple with no animations where motion toast looks styled & beautiful with animations. If you want to display a styled toast, you can use motion toast in flutter. It offers built-in types of toast messages like success, error, warning, delete & info. We can use them or customize our own toast message instead.

Motion Toast / Styled Toast Features

Motion toast offers different features that help us in enhancing & customizing the toast message. Let’s see the features offered by motion_toast dependency.

  • Animated toasts with animated icons
  • Built-in types (Success, Warning, Error, Info, Delete)
  • Possibility to design your own toast
  • Support null safety
  • Heartbeat animations
  • Full customized text
  • Customize toast duration
  • Built in animations
  • Customize toast layout (LTR/RTL)
  • Customize Motion toast position (Center, Bottom, Top)

In flutter, there is no specific widget or function available to display a motion toast message. We can use snackbar widget instead of toast or motion toast but, we cannot change the position of snackbar like toast & motion toast. To add functionality for displaying beautiful and styled toast message to our flutter application we have to use motion toast dependency. This tutorial shows you how to create and show a styled toast message in flutter using motion toast dependency. You will also learn how to create a custom toast message using different properties with example.

Creating Motion Toast / Styled Toast In Flutter

To create and show a motion toast message in flutter follow the steps below :

  • Create a flutter project
  • Add motion_toast dependency to the project
  • Import the motion toast package :- import ‘package: motion_toast/motion_toast.dart’;
  • Implement code for creating and showing motion toast in flutter.

Let’s add motion toast depenency to pubspec.yaml file present in the root folder of our project.

pubspec.yaml

dependencies:
  motion_toast: ^1.2.0

Now import the motion toast package to use motion toast functionality in our project.

import 'package:motion_toast/motion_toast.dart';

As we are done with adding the dependency and importing the library, its time to create the toast. Let’s create and show a styled motion toast by calling MotionToast().show(context). Provide values for required properties color, description and icon properties. Without providing these values we cannot create a motion toast.

MotionToast(
              color: Colors.orange,
              description: "This is a styled toast",
              icon: Icons.message,
            ).show(context);

Flutter Motion Toast / Styled Toast Properties

The properties of styled motion toast are :

  • color
  • title
  • description
  • icon
  • titleStyle
  • descriptionStyle
  • iconSize
  • iconType
  • width
  • position
  • enableAnimation
  • animationDuration
  • animationCurve
  • animationType
  • layoutOrientation
  • toastDuration

As we can’t display a toast message directly place the below example code snippets inside onPressed callback of any button or widget.

Color

It takes material color as value. We will use this property to add or change background color of the toast.

MotionToast(
              color: Colors.green,
              description: "This is a styled toast",
              icon: Icons.message,
            ).show(context);

Output :

flutter styled toast or motion toast color

title

It takes string as value. We will use this property to add title to the toast message.

MotionToast(
              color: Colors.green,
              description: "This is a styled toast",
              icon: Icons.message,
              title: "Message",
            ).show(context);

Output :

flutter motion toast or styled toast title

description

It takes string as value. We will use this property to add the toast message we want to display to the users.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
            ).show(context);

Output :

flutter motion toast or styled toast description

icon

It accepts IconData as value. We will use this property to display a toast with icon. We don’t have to provide icon if the toast is one of the built-in type. Only custom toast require us to add icon.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
            ).show(context);

Output :

flutter styled toast or motion toast icon

titleStyle

It takes TextStyle as value. We will use this property to apply style to the title of the toast message. We will change the fontSize, color and weight in the below example.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              title: "Message",
              titleStyle: TextStyle(
                  fontSize: 16,
                  fontWeight:FontWeight.bold,
                  color: Colors.deepOrange
              ),
            ).show(context);

Output :

flutter styled toast or motion toast title style

descriptionStyle

It takes TextStyle as value. We will use this property to apply style to the description of the toast message. In the below example we will change text color and fontsize.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              descriptionStyle: TextStyle(
                  fontSize: 14,
                  color: Colors.deepOrange
              ),
            ).show(context);

Output :

flutter motion toast or styled toast description style

iconSize

It takes double as value. Use this property if you want to change the icon size.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              iconSize: 60,
            ).show(context);

Output :

flutter styled toast or motion toast icon size

iconType

It takes ICON_TYPE as value. ICON_TYPE has two values MATERIAL_DESIGN & CUPERTINO. Use this property to change the type of icon you want to use with the toast message.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              iconType: ICON_TYPE.CUPERTINO,
            ).show(context);

width

It takes double as value. Use this property if you want to change the width of the toast message.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              width: 300,
            ).show(context);

Output :

flutter motion toast or styled toast width

position

It takes MOTION_TOAST_POSITION as value. MOTION_TOAST_POSITION has three values, TOP, BOTTOM & CENTER. Use this property to change the position of the toast message. I will use TOP in below example.

Note: When position is set to TOP you can’t set animationType to ANIMATION.FROM_BOTTOM & when position is set to BOTTOM you can’t set animationType to ANIMATION.FROM_TOP. By default the animation type is ANIMATION.FROM_BOTTOM & position will be BOTTOM.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              position: MOTION_TOAST_POSITION.TOP,
              animationType: ANIMATION.FROM_TOP,
            ).show(context);

Output :

flutter motion toast or styled toast position

enableAnimation

It takes boolean as value. Use this property if you want to enable or disable the heartbeat animation of the icon. By default the value will be true.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              enableAnimation: false,
            ).show(context);

animationDuration

It takes Duration as value. Use this property if you want to change the duration of animation of the toast message. By default the duration of animation is 1.5 seconds.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              enableAnimation: false,
              animationDuration: Duration(seconds: 3),
            ).show(context);

Output :

flutter motion toast or styled toast animation duration

animationCurve

It takes Curves as value. Use this property to change the animation pattern. I will use Curves.bounceIn in the below example. Try the rest for yourself. By default the value is Curves.ease.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              animationCurve: Curves.bounceIn,
            ).show(context);

Output :

flutter motion toast or styled toast animation curve

animationType

It takes ANIMATION as value. Use this property to change the animation direction. ANIMATION has four values, FROM_BOTTOM, FROM_TOP, FROM_LEFT & FROM_RIGHT. By default the value will be FROM_BOTTOM. I will use FROM_LEFT in the below example.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              animationType: ANIMATION.FROM_LEFT,
            ).show(context);

Output :

flutter motion toast or styled toast animation type

layoutOrientation

It takes ORIENTATION as value. ORIENTATION has two values LTR( left to right ) & RTL (right to left). Use this property to change the orientation of toast layout. By default the value is LTR. I will use RTL in the below example.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              layoutOrientation: ORIENTATION.RTL,
            ).show(context);

Output :

flutter motion toast or styled toast layout orientation

toastDuration

It takes Duration as value. Use this property to change the duration you want the toast to appear on screen.

MotionToast(
              color: Colors.green,
              description: "This is description",
              icon: Icons.message,
              toastDuration: Duration(seconds: 3),
            ).show(context);

Flutter Motion Toast / Styled Toast Built-In Types

Motion toast offers five built-in toast messages. You can’t provide values for color and icon properties for these built-in messages. They will be applied automatically based on the type of the message. Let’s see the built-in messages below.

  • success
  • error
  • warning
  • delete
  • info

success

MotionToast.success(
	title:  "Success Motion Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Example of success motion toast",
	descriptionStyle:  TextStyle(fontSize:  12),
	width:  300,
).show(context);

Output :

flutter motion toast success message

error

MotionToast.error(
	title:  "Error",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Please enter your name"
).show(context);

Output :

flutter motion toast error message

warning

MotionToast.warning(
	title:  "Warning Motion Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "This is a Warning"
).show(context);

Output :

flutter motion toast warning message

delete

MotionToast.delete(
	title:  "Deleted",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "The item is deleted"
).show(context);

Output :

flutter motion toast delete message

info

MotionToast.info(
	title:  "Info Motion Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Example of Info Toast"
).show(context);

Output :

flutter motion toast info message

Flutter Motion Toast / Styled Toast Example

Let’s see an example which shows the usage of motion_toast dependency for creating styled toast message in flutter. In this example we will show six elevated buttons, where the first five buttons will display the five built-in messages. The sixth button will display a custom message.

import 'package:flutter/material.dart';
import 'package:motion_toast/motion_toast.dart';
import 'package:motion_toast/resources/arrays.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App Learning',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Motion Toast"),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.only(top: 20),
        child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 250,
            height: 50,
            margin: EdgeInsets.only(top: 10),
            child: ElevatedButton(
              onPressed:(){
                successMotionToast();
              },
              child: Text("Success Toast"),),
          ),

          Container(
            width: 250,
            height: 50,
            margin: EdgeInsets.only(top: 10),
            child: ElevatedButton(
              onPressed:(){
                errorMotionToast();
              },
              child: Text("Error Toast"),),
          ),

          Container(
            width: 250,
            height: 50,
            margin: EdgeInsets.only(top: 10),
            child: ElevatedButton(
              onPressed:(){
                warningMotionToast();
              },
              child: Text("Warning Toast"),),
          ),

          Container(
            width: 250,
            height: 50,
            margin: EdgeInsets.only(top: 10),
            child: ElevatedButton(
              onPressed:(){
                deleteMotionToast();
              },
              child: Text("Delete Toast"),),
          ),

          Container(
            width: 250,
            height: 50,
            margin: EdgeInsets.only(top: 10),
            child: ElevatedButton(
              onPressed:(){
                infoMotionToast();
              },
              child: Text("Info Toast"),),
          ),

          Container(
            width: 250,
            height: 50,
            margin: EdgeInsets.only(top: 10),
            child: ElevatedButton(
              onPressed:(){
                customMotionToast();
              },
              child: Text("Custom Toast"),),
          ),

       ]
    )
    );
  }

  void successMotionToast()
  {
    MotionToast.success(
      title:  "Success Motion Toast",
      titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
      description:  "Example of success motion toast",
      descriptionStyle:  TextStyle(fontSize:  12),
      width:  300,
    ).show(context);
  }

  void errorMotionToast()
  {
    MotionToast.error(
        title:  "Error",
        titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
        description:  "Please enter your name",
        animationType: ANIMATION.FROM_LEFT,
    ).show(context);
  }

  void warningMotionToast()
  {
    MotionToast.warning(
        title:  "Warning Motion Toast",
        titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
        description:  "This is a Warning",
        animationType: ANIMATION.FROM_RIGHT,
    ).show(context);

  }

  void deleteMotionToast()
  {
    MotionToast.delete(
        title:  "Deleted",
        titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
        description:  "The item is deleted",
        position: MOTION_TOAST_POSITION.CENTER,
        animationType: ANIMATION.FROM_LEFT,
    ).show(context);
  }

  void infoMotionToast()
  {
    MotionToast.info(
        title:  "Info Motion Toast",
        titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
        description:  "Example of Info Toast"
    ).show(context);
  }

  void customMotionToast()
  {
    MotionToast(
      color: Colors.green,
      description: "This is custom toast",
      icon: Icons.message,
      toastDuration: Duration(seconds: 3),
    ).show(context);
  }
}

Output :

flutter motion toast or styled toast example output

That brings an end to the tutorial on how to create and show styled toast or motion toast in flutter. We have also seen an example where we’ve used motion_toast dependency for adding styled toast functionality to our flutter project. Let’s catch up with some other widget in the next post. Have a great day !!

Do like & share my facebook page. Subscribe to newsletter if you find this post helpful. Thank you !!

Reference : motion_toast dependency.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.