Flutter - Snackbar

Last Updated : 17 Mar, 2025

SnackBar is a widget provided by Flutter to display a dismissible pop-up message on your application. It is used to show users if certain actions take place in our applications. For example, if the user login process fails due to some reason, so to inform the user to try again we can use snackbar. It pops up on the screen, and it can also perform operations like undoing the action that has taken place. Snackbar displays the informative message for a very short time and when the time is completed, it disappears on its own. The recommended onscreen time for a SnackBar is 5-10s. It is provided in the material package of the flutter libraries.

Note: You need to import "package:flutter/material.dart" to use a snackbar.

Constructor for SnackBar

SnackBar SnackBar({
    Key? key,
    required Widget content,
    Color? backgroundColor,
    double? elevation,
    EdgeInsetsGeometry? margin,
    EdgeInsetsGeometry? padding,
    double? width,
    ShapeBorder? shape,
    HitTestBehavior? hitTestBehavior,
    SnackBarBehavior? behavior,
    SnackBarAction? action,
    double? actionOverflowThreshold,
    bool? showCloseIcon,
    Color? closeIconColor,
    Duration duration = _snackBarDisplayDuration,
    Animation<double>? animation,
    void Function()? onVisible,
    DismissDirection? dismissDirection,
    Clip clipBehavior = Clip.hardEdge,
})

Properties of SnackBar

Property

Description

action

An action to perform based on snackbar.

animation

Entry and the exit animation of snackbar.

backgroundcolor

Snackbar background color.

behavior

Behavior and location of snackbar.

content

Content of snackbar.

duration

The amount of time snackbar should be displayed.

elevation

Elevates the snackbar by increasing shadow.

margin

Space around snackbar.

onVisible

Called the first time that the snackbar is visible within a scaffold.

padding

Space around content inside snackbar.

shape

Shape of snackbar.

width

Width of snackbar.


Steps to Create a Snackbar

Step 1: Create a Scaffold Widget

A Snackbar is displayed inside a scaffold widget that is used to create the entire screen of your mobile application. It provides the appbar, title, and other properties of the body that all together makes up the widget tree.

Dart 
 Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white
      ),
        body: //To be code
);


Step 2: Create a Snackbar class

Create a stateless widget class that will represent your snackbar and the actions it is performing. Inside this class create a button it may be ElevatedButton or TextButton and assign a look to it, For Example: color, text, onhover effect etc. Create a final property and return Snackbar to it, that will hold all the actions that are going to be performed when the button is clicked. 

Dart 
class snackBarDemo extends StatelessWidget {
  const snackBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green, foregroundColor: Colors.white),
        onPressed: () {
          const snackdemo = SnackBar(
            
            content: Text('Hii this is GFG\'s SnackBar'),
            backgroundColor: Colors.green,
            elevation: 10,
            behavior: SnackBarBehavior.floating,
            margin: EdgeInsets.all(5),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackdemo);
        },
        child: const Text(
          'Click Here',
        ),
      ),
    );
  }
}


Step 3: Display the Snackbar

Use the Scaffold Messenger class to display the information contained by your snackbar. It uses a context provided by the BuilContext argument. Here, snackdemo is the final property that holds the snackbar.

Dart 
Scaffold.of(context).showSnackBar(snackdemo);


Step 4: Call your Class

Finally, Inside the body of the scaffold call the stateless class you created for your snackbar.

Dart 
Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: snackBarDemo(),
    );
  }
}


Complete Source Code

main.dart:

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  static const header = 'GeeksforGeeks';

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: header,
      home: MyHomePage(title: header),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: const snackBarDemo(),
    );
  }
}

// ignore: camel_case_types
class snackBarDemo extends StatelessWidget {
  const snackBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green, foregroundColor: Colors.white),
        onPressed: () {
          const snackdemo = SnackBar(
            content: Text('Hii this is GFG\'s SnackBar'),
            backgroundColor: Colors.green,
            elevation: 10,
            behavior: SnackBarBehavior.floating,
            margin: EdgeInsets.all(5),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackdemo);
        },
        child: const Text(
          'Click Here',
        ),
      ),
    );
  }
}

Output:


Comment

Explore