Skip to content
Related Articles

Related Articles

Improve Article

Flutter – Snackbar

  • Last Updated : 19 Apr, 2021

Snackbar 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 screen, and it can also perform operations like undo the action which has taken place.

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.

Implementation:

main.dart file

Dart




import 'package:flutter/material.dart';
  
void main() => runApp(SnackBarDemo());
  
class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Snackbar',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: SnackBarPage(),
      ),
    );
  }
}
  
class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        
      // Raised button
      child: RaisedButton(
        color: Colors.green,
        onPressed: () {
            
          // when raised button is pressed
          // snackbar will appear from bottom of screen
          final snackBar = SnackBar(
            content: Text('Snackbar!'),
          );
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text('Display SnackBar'),
      ),
    );
  }
}

Output:

Changing properties:



SnackBar(
            content: Text('Snackbar!'),
            backgroundColor: Colors.green,
            elevation: 10,
            behavior: SnackBarBehavior.floating,
            margin: EdgeInsets.all(10),
          );

Output:

In the above code, we added floating behavior to snackbar and gave a margin to it from all directions. We also added some amount of elevation to it.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :