Flutter SnackBar | Flutter SnackBar Full tutorial

In Flutter, a SnackBar is a lightweight feedback widget that displays a brief message at the bottom of the screen. Here’s an example of how to use a SnackBar in Flutter:

Flutter SnackBar

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar Example'),
        ),
        body: SnackBarExample(),
      ),
    );
  }
}

class SnackBarExample extends StatelessWidget {
  void _showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('This is a SnackBar'),
      duration: Duration(seconds: 2),
      action: SnackBarAction(
        label: 'Close',
        onPressed: () {
          // Action to be performed when the "Close" button is pressed
          ScaffoldMessenger.of(context).hideCurrentSnackBar();
        },
      ),
    );

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          _showSnackBar(context);
        },
        child: Text('Show SnackBar'),
      ),
    );
  }
}

Flutter Action

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar with Action Example'),
        ),
        body: SnackBarWithActionExample(),
      ),
    );
  }
}

class SnackBarWithActionExample extends StatelessWidget {
  void _showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('This is a SnackBar with an Action'),
      action: SnackBarAction(
        label: 'Undo',
        onPressed: () {
          // Action to be performed when the "Undo" button is pressed
          // Add your logic here
        },
      ),
    );

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          _showSnackBar(context);
        },
        child: Text('Show SnackBar with Action'),
      ),
    );
  }
}

Flutter SnackBar with Duration

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar with Duration Example'),
        ),
        body: SnackBarWithDurationExample(),
      ),
    );
  }
}

class SnackBarWithDurationExample extends StatelessWidget {
  void _showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('This is a SnackBar with Duration'),
      duration: Duration(seconds: 3), // Set the duration for which the SnackBar is visible
    );

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          _showSnackBar(context);
        },
        child: Text('Show SnackBar with Duration'),
      ),
    );
  }
}

Flutter SnackBar with Background Color

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar with Background Color Example'),
        ),
        body: SnackBarWithBackgroundColorExample(),
      ),
    );
  }
}

class SnackBarWithBackgroundColorExample extends StatelessWidget {
  void _showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('This is a SnackBar with Background Color'),
      backgroundColor: Colors.blue, // Set the background color of the SnackBar
    );

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          _showSnackBar(context);
        },
        child: Text('Show SnackBar with Background Color'),
      ),
    );
  }
}

Handle: SnackBar is shown even if the button is pressed multiple times:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBarExample'),
        ),
        body: SnackBarWithDurationExample(),
      ),
    );
  }
}

class SnackBarWithDurationExample extends StatefulWidget {
  @override
  _SnackBarWithDurationExampleState createState() => _SnackBarWithDurationExampleState();
}

class _SnackBarWithDurationExampleState extends State<SnackBarWithDurationExample> {
  bool _isSnackBarVisible = false;

  void _showSnackBar(BuildContext context) {
    if (!_isSnackBarVisible) {
      _isSnackBarVisible = true;

      final snackBar = SnackBar(
        content: Text('This is a SnackBar with Duration'),
        duration: Duration(seconds: 3),
        onVisible: () {
          Future.delayed(Duration(seconds: 3), () {
            setState(() {
              _isSnackBarVisible = false;
            });
          });
        },
      );

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          _showSnackBar(context);
        },
        child: Text('Show SnackBar with Duration'),
      ),
    );
  }
}

Frequent Ask Questions

How to show SnackBar after page load ?

To efficiently display a SnackBar or execute SnackBar-related actions after the page has loaded, it’s advisable to confirm the successful reception of response data from the API.