How to Quickly Create a Snackbar on Flutter

Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a snackbar notification in Flutter, quickly and easily. Are you curious? Come on, follow the details below.

Snackbar is a notification that is usually used in mobile applications to tell you something. The snackbar usually appears at the bottom of the screen, and only appears for a few moments. Flutter also provides this widget to create notifications that add to the user experience. It's easy, please follow the steps below.

How to Create a Snackbar in Flutter

1. First, create a new flutter project with the name you want. Use the latest version of flutter. The flutter that I am currently using is flutter version 3+.

2. Open the main.dart file then change the script with the script below.

// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  // Function for show the snackbar
  void _showSnackbar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Ini adalah Snackbar!'),
      action: SnackBarAction(
        label: 'Tutup',
        onPressed: () {
          // Action to be executed when the "Close" button on the Snackbar is clicked.
        },
      ),
    );

    // show Snackbar with ScaffoldMessenger
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contoh Snackbar'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            /// Calls the _showSnackbar function when the button is clicked
            _showSnackbar(context);
          },
          child: Text('Tampilkan Snackbar'),
        ),
      ),
    );
  }
}

3. Now try running the application via the emulator. If successful, the display will look like the image below.

Now you can create snackbars in Flutter easily. You can improvise by adding a snackbar widget for certain actions. Such as notifications when data is successfully entered or notifications when data is successfully deleted. Adding a snackbar to an application can increase user comfort. Because the application can provide information about an action being carried out.

That's it for this short tutorial on how to quickly create a snackbar on Flutter. Hopefully this short tutorial is useful, if you have any problems, please ask directly in the comments column below. That is all and thank you.