Open In App

Floating SnackBar in Flutter

Improve
Improve
Like Article
Like
Save
Share
Report

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. A sample output given below gives you an idea of what we are going to do in this article.

How to Use:

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),
);

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: Import the Package in the pubspec.yaml File.

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

flutter pub add floating_snackbar

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

 

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 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'),
    ),
    body: 
),

Step 6: Using Floating SnackBar

Now the main part of the example, use 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 Code:

Dart




import 'package:floating_snackbar/floating_snackbar.dart';
import 'package:flutter/material.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('Floating Snackbar'),
        ),
        body: Center(
          child: 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 Floating SnackBar'),
          ),
        ),
    );
  }
}


Output: 



Last Updated : 24 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads