Floating SnackBar in Flutter

The floating_snackbar in Flutter is used to display a temporary message to users, often as feedback after an action.

We know how to show the snack bar in a flutter, but everybody wants the application must look more interactive and user-friendly, that's why we can use animations or new designs in the application, And also Floating snack bar is one of them. A snack bar is a pop-up that animates from the bottom of the application to show the user interaction or user activity.

How to Use:

TextButton(
        onPressed: () {
        floatingSnackBar(
                     message: 'Hi GeeksforGeeks, we are back',
                     context: context,
                     textColor: Colors.black,
                     textStyle: const TextStyle(color: Colors.green),
                     duration: const Duration(milliseconds: 4000),
                     backgroundColor: Color.fromARGB(255, 220, 234, 236),
        );
},
        child:  const  Text('Show SnackBar'),
);

Step By Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add  floating_snackbar as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

dependencies:
     flutter:
       sdk: flutter
     floating_snackbar: ^1.0.5

Now run the below command in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add floating_snackbar

Step 3: Import the package into the main file

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

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

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

Step 4: Creating a 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.

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

Step 5: Working with Scaffold.

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. 

home: Scaffold(
    appBar: AppBar(
        title: Text('Copy to clipboard'),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
    ),
    body: 
),

Step 6: Using Floating SnackBar

Now the main part of the example, uses the center widget to show the button in the center of the body of the application, then in on pressed property we can use the Floating SnackBar and assign its parameters.

Complete Source Code:

// Import necessary packages
import 'package:floating_snackbar/floating_snackbar.dart';
import 'package:flutter/material.dart';

// Main function to run the app
void main() {
    runApp(MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        home: RunMyApp(),
    ));
}

// Define a stateful widget
class RunMyApp extends StatefulWidget {
    const RunMyApp({super.key});
    
    @override
    State<RunMyApp> createState() => _RunMyAppState();
}

// Define the state for the stateful widget
class _RunMyAppState extends State<RunMyApp> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Floating Snackbar'),
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
            ),
            body: Center(
                child: TextButton(
                onPressed: () {
                    // Display the floating snackbar
                    floatingSnackBar(
                        message: 'Hi GeeksforGeeks, we are back',
                        context: context,
                        textColor: Colors.black,
                        textStyle: const TextStyle(color: Colors.green),
                        duration: const Duration(milliseconds: 4000),
                        backgroundColor: Color.fromARGB(255, 220, 234, 236),
                    );
                },
                child: const Text('Show Floating SnackBar'),
                ),
            ),
        );
    }
}

Output: