Flutter – How to show SnackBar

In this post, we will learn how to show SnackBar in flutter through a simple demo.

import 'package:flutter/material.dart';

void main() => runApp(ShowSnackBarDemo());

class ShowSnackBarDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Coflutter - SnackBar',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Coflutter - SnackBar'),
          backgroundColor: const Color(0xffae00f0),
        body: SnackBarScreen(),
        // The snackbar will not overlap important widgets
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},

class SnackBarScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
        child: Text('Show SnackBar'),

  void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: const Text('Hello, Coflutter!'),
      backgroundColor: const Color(0xffae00f0),
      behavior: SnackBarBehavior.floating,
      duration: const Duration(seconds: 2),
      action: SnackBarAction(
          label: 'Done',
          textColor: Colors.white,
          onPressed: () {
            print('Done pressed!');



Some notes:

  • To show snack bar, we need a Scaffold as its parent.
  • Snack bar will not overlap other important widgets (FloatingActionButton in our example).
  • The snack bar appears at the bottom of the screen (Until now, there is no option to show snack bar at the top of screen). We need to custom widget or use external packages (like flushbar) to show similar snack bar at the top of screen.
  • There are 2 behaviors:
SnackBarBehavior.fixed (default)



Tagged : / /
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x