Flutter Snackbar Example:  How you can use this to display messages

here you will get an example code and a quick tutorial on how to use the flutter snack bar in your flutter application.

The Flutter SnackBar class, one of the numerous widgets that implement Material Design in Flutter, will be covered in this lesson. To demonstrate how SnackBar functions in practice, we’ll go over some of the widget’s key features, describe how to customize and display snackbar in a Flutter app, and discuss some real-world instances.

You should be familiar with the fundamentals of Flutter app development and have some experience using the SDK to create cross-platform applications in order to follow along.

Now without wasting time, let’s begin!

What is SnackBar in flutter?

A pop-up message can be momentarily shown in your app using the SnackBar Flutter widget. Normally, it can be found at the bottom of the app’s display.

Use the SnackBar widget, for instance, to inform the user when an item has been added to the cart or removed, to send a form, or upload an image successfully.

How to implement a snackbar in the flutter app?

For working with snackbar you have basic knowledge of flutter widgets and consider the following in your mind.

Time is very important when you implement snackbar in your app and this refers to how long a SnackBar is shown within the application. Always bear in mind that the SnackBar shouldn’t take the user’s attention away from the app’s primary objective.

Most of the time a SnackBar is frequently positioned at the bottom of the app screen for this purpose, among others. In a Flutter app, a SnackBar should only be visible for four to ten seconds at most.

When to use Snackbar?

A SnackBar may vanish from the app screen without the user’s participation after a predetermined amount of time, as was already discussed, thus it’s a good idea to have an interactive component to go with your message.

For example, if you want your user to do some action you can make the user do that you can place buttons and link it to the Snackbar widget that saying did you like the app with a text “Yes” or “No”.

Lets Code the Flutter Snackbar Example.

The coding process involves this steps

Step: 1

Launch your favorite IDE and start a new flutter project name anything you like. If your ide has its own terminal then run this command for creating the project or run in the terminal.

flutter create snackbar_example

Step: 2

Next, go to the main.dart file inside your lib folder and delete MyHomePage class completely. Because we will create our own home page. For that create a file homepage.dart inside the lib folder this file will be our home page. Make your main.dart exactly like this.

import 'package:flutter/material.dart';
import 'package:snackbar_example/homepage.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Step: 3

Make a stateless class widget on homepage.dart file don’t forget to import 

import 'package:flutter/material.dart';

Now your homepage.dart will look like this

import 'package:flutter/material.dart';
 
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Step: 4

For the body of the scaffold we will take a center widget and the child for this center we take a raised button

Scaffold(
      appBar: AppBar(
        title: const Text('SnackBar example'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
          },
        ),
      ),
    );

Step: 5

For showing a snackbar create a final variable inside your HomePage class as follow

final snackBar = SnackBar(
    content: const Text('This is SnackBar!!!'),
    action: SnackBarAction(
      label: 'dismiss',
      onPressed: () {},
    ),
  );

This is the simplest example of the snack bar. In flutter, we have a special class 

displaying text message and that is ScaffoldMessenger we can use this inside our buttons onpressed property as follow

ElevatedButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        ),

Now when pressing the button you will see a snackbar coming from the bottom showing the text ‘This is SnackBar!!!’ with another text saying ‘dismiss’ if you click on this text the snackbar will immediately disappear here is the screenshot showing the snack bar your app will look exactly like this.

You can change the color of the snackbar. The SnackBar() has backgroundColor property you can use it

final snackBar = SnackBar(
    backgroundColor: Colors.green,
    content: const Text('This is SnackBar!!!'),
    action: SnackBarAction(
      label: 'dismiss',
      onPressed: () {},
    ),
  );

The  SnackBar() has many different properties you can understand it by just reading. It is very easy.

I sincerely hope this tutorial was helpful. Building apps for both the web and mobile platforms is simple with Flutter. Widgets are the foundation of Flutter. To ensure that your users get the most out of your Flutter application, the SnackBar widget makes it simple to distribute critical and educational information to them.

Full Code

file: main.dart

import 'package:flutter/material.dart';
import 'package:snackbar_example/homepage.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

file : homepage.dart

import 'package:flutter/material.dart';
 
class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
 
  final snackBar = SnackBar(
    backgroundColor: Colors.green,
    content: const Text('This is SnackBar!!!'),
    action: SnackBarAction(
      label: 'dismiss',
      onPressed: () {},
    ),
  );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SnackBar example'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        ),
      ),
    );
  }
}

For more info on Flutter SnackBar Visit https://api.flutter.dev/flutter/material/SnackBar-class.html

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com