display snackbar in flutter

It very well may be valuable to quickly illuminate your clients when certain activities happen. For instance, when a client swipes away a message in top notch, you should advise them that the message has been erased. You may even need to give them a choice to fix the activity.

In Material Design, this is the employment of a SnackBar. This formula actualizes a snackbar utilizing the accompanying advances:

  1. Make a Scaffold.
  2. Show a SnackBar.
  3. Give a discretionary activity.


1. Create a Scaffold

While making applications that follow the Material Design rules, give your applications a steady visual structure. In this model, show the SnackBar at the lower part of the screen, without covering other significant gadgets, for example, the FloatingActionButton.

The Scaffold gadget, from the material library, makes this visual structure and guarantees that significant gadgets don’t cover.

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // Complete this code in the next step.
);

2. Display a SnackBar

With the Scaffold set up, show a SnackBar. To start with, make a SnackBar, at that point show it utilizing the Scaffold.

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

// Find the Scaffold in the widget tree and use it to show a SnackBar.
Scaffold.of(context).showSnackBar(snackBar);

3. Provide an optional action

You should give an activity to the client when the SnackBar is shown. For instance, if the client coincidentally erases a message, they may utilize a discretionary activity in the SnackBar to recuperate the message.

Here’s an illustration of giving an extra activity to the SnackBar gadget:

final snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);


Interactive example :

import 'package:flutter/material.dart';

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

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

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

          // Find the Scaffold in the widget tree and use
          // it to show a SnackBar.
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text('Show SnackBar'),
      ),
    );
  }
}

Thanks for being with us on a Flutter Journey!!!

Leave a Comment