Motion Toast Widget in Flutter

A Motion Toast widget in Flutter is a type of toast message that animates its appearance on the screen. It can be used to provide feedback or notifications to the user in a subtle, yet attention-grabbing way. One way to implement a Motion Toast in Flutter is to use the AnimatedContainer widget. You can use the AnimatedContainer to animate the size and position of the toast as it appears on the screen, and you can use the Opacity widget to animate the visibility of the toast.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the dependency to your pubspec.yaml file

From the command line:

flutter pub add motion_toast

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Import the package

import 'package:motion_toast/motion_toast.dart';

Step 3: Import the Material Package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
void main() {
    runApp(MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        home: RunMyApp(),
    ));
}

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 4: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application. Shortcut for creating stateless or Stateful widget –  You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
    const RunMyApp({
        super.key
    });
    @
override
    Widget build(BuildContext context) {
        return Scaffold();
    }
}

Step 5: Create a Button to call the Widget MotionToast.success

Now create a button that going to be in the center and call the widget MotionToast.success.

body: Center(
    child: ElevatedButton(
        onPressed: () {
            MotionToast.success(
                title: Text("Congratulations from GeeksforGeeks"),
                description: Text("You have Completed your first round,Kindly wait for the result"),
            ).show(context);
        },
        child: Text('Show toast')
    ),
),

Complete Code:

Dart

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

void main() {
    runApp(MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        home: RunMyApp(),
    ));
}

class RunMyApp extends StatefulWidget {
    const RunMyApp({
        super.key
    });

    @override
    State < RunMyApp > createState() = > _RunMyAppState();
}

class _RunMyAppState extends State < RunMyApp > {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Motion Toast'),
            ),
            body: Center(
                child: ElevatedButton(
                    onPressed: () {
                        MotionToast.success(
                            title: Text("Congratulations from GeeksforGeeks"),
                            description: Text("You have Completed your first round,Kindly wait for the result"),
                        ).show(context);
                    },
                    child: Text('Show toast')),
            ),
        );
    }
}

Output: