Flutter – Snackbar

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 which has taken place. Snackbar displays the informative message for a very short period of 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. You need to import “package:flutter/material.dart” to use a snackbar.

Constructors:

SnackBar({Key key, 
@required Widget content, 
Color backgroundColor, 
double elevation, 
EdgeInsetsGeometry margin, 
EdgeInsetsGeometry padding, 
double width, 
ShapeBorder shape, 
SnackBarBehavior behavior, 
SnackBarAction action, 
Duration duration: _snackBarDisplayDuration, 
Animation<double> animation, 
VoidCallback onVisible})

Properties:

1. action: Action to perform based on snackbar.
2. animation: Entry and the exit animation of snackbar.
3. backgroundcolor: Snackbar background color 
4. behavior: Behavior and location of snackbar.
5. content: Content of snackbar.
6. duration: The amount of time snackbar should be displayed.
7. elevation: Elevates the snackbar by increasing shadow.
8. margin: Space around snackbar.
9. onVisible: Called the first time that the snackbar is visible within a scaffold.
10. padding: space around content inside snackbar.
11. shape: Shape of snackbar.
12. width: Width of snackbar.

Steps to Create a Snackbar

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

 Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),

    );

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 elevated, raised or flat, 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. 

class snackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.green)),
        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);

          // 'showSnackBar' is deprecated and shouldn't be used.
          //Use ScaffoldMessenger.showSnackBar.
          // Scaffold.of(context).showSnackBar(snackdemo);
        },
        child: const Text('Click Here'),
      ),

      // RaisedButton is deprecated and shouldn't be used.
      
      // child: RaisedButton(
      //     child: const Text('Click Here!'),
      //     color: Colors.green,
      //     onPressed: () {
      //       const snackdemo = SnackBar(
      //         content: Text('Hii this is GFG\'s SnackBar'),
      //         backgroundColor: Colors.green,
      //         elevation: 10,
      //         behavior: SnackBarBehavior.floating,
      //         margin: EdgeInsets.all(5),
      //       );
      //       Scaffold.of(context).showSnackBar(snackdemo);
      //     }),,
    );
  }
}

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.

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

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

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

Implementation:

File: 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),
    );
  }
}

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,
      ),
      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: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.green)),
        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);

          // 'showSnackBar' is deprecated and shouldn't be used.
          //Use ScaffoldMessenger.showSnackBar.
          // Scaffold.of(context).showSnackBar(snackdemo);
        },
        child: const Text('Click Here'),
      ),

      // RaisedButton is deprecated and shouldn't be used.

      // child: RaisedButton(
      //     child: const Text('Click Here!'),
      //     color: Colors.green,
      //     onPressed: () {
      //       const snackdemo = SnackBar(
      //         content: Text('Hii this is GFG\'s SnackBar'),
      //         backgroundColor: Colors.green,
      //         elevation: 10,
      //         behavior: SnackBarBehavior.floating,
      //         margin: EdgeInsets.all(5),
      //       );
      //       Scaffold.of(context).showSnackBar(snackdemo);
      //     }),
    );
  }
}

Output: