Display Snackbar in Flutter

Display Snackbar in Flutter

A snackbar is a small banner that appears at the bottom of the screen. A snackbar provides a short message about running processes and automatically disappears after a few seconds.

Create an instance of SnackBar class and use the showSnackBar method of ScaffoldMessenger class to display a snackbar.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void _showSnackBar() {
    const snackBar = SnackBar(content: Text('Hello world'));

    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Snackbar')),
        body: Center(
            child: ElevatedButton(
          onPressed: _showSnackBar,
          child: const Text('Open'),
        )));
  }
}

Leave a Comment

Cancel reply

Your email address will not be published.