Change position of a Flutter Snackbar

Question

I want to display a simple disappearing error message above a button when certain conditions aren't met. It seems as if Flutter's Snackbar is well suited to this purpose.

However, I'm having difficulty changing the position of the Snackbar to be anything other than at the very bottom of the screen. Is this possible? If not, is there a Widget better suited for this purpose?

My current snackbar code:

class ContinueButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(
          bottom: 24.0, top: 24.0),
      child: Align(
        alignment: FractionalOffset.bottomCenter,
        child: MaterialButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: Text('Yay! A SnackBar!'),
            );
            Scaffold.of(context).showSnackBar(snackBar);
          },

          child: Text('Continue'),
          height: 40.0,
          minWidth: 300.0,
          color: Colors.greenAccent,
        ),
      ),
    );
  }
}

score 19 · Answer 1 · edited Nov 30 '22 at 14:20

19

You can try by, setting behavior as SnackBarBehavior.floating and setting margin as much as you want.

SnackBar(
  behavior: SnackBarBehavior.floating,
  margin: EdgeInsets.only(bottom: 100.0),
  content: Text("Hello World!"),
);

The only issue with this solution is that everything underneath won't be clickable.

To resolve this clickable issue, set dismissDirection property to DismissDirection.none. This also means that the default property of a snackbar being able to be dismissed by dragging it down is lost. (default is DismissDirection.down)

SnackBar(
  behavior: SnackBarBehavior.floating,
  margin: EdgeInsets.only(bottom: 100.0),
  content: Text("Hello World!"),
  dismissDirection: DismissDirection.none
);

edited Nov 30 '22 at 14:20

Leeroy

3
1

answered Oct 30 '21 at 10:21

Sameera Damith

451
7
9

8

the only issue with this solution is that everything underneath will not be clickable – Alberto M Dec 01 '21 at 10:59
1

And that's a big problem... – genericUser Nov 08 '22 at 11:02

score 7 · Answer 2 · answered Apr 24 '20 at 07:14

You can do this by placing a container inside the snackbar. Since snackbar can take any widget and you can change its background color to transparent, you can use a container with custom padding and borders to give an illusion of positioning.

SnackBar(content: Container(
  //color: Colors.white,
  decoration: BoxDecoration(color: Colors.white, border: Border.all(width: 2.0, color: Colors.black), borderRadius: BorderRadius.circular(20)),
  margin: EdgeInsets.fromLTRB(0, 0, 0, 75),
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('Yay! A SnackBar!'),
  ),
), backgroundColor: Colors.transparent, elevation: 1000, behavior: SnackBarBehavior.floating,);

score 3 · Answer 3 · edited Sep 18 '19 at 12:40

3

Unfortunately, no. But you can use https://api.flutter.dev/flutter/widgets/Overlay-class.html to display a Widget over another Widget (In your case over and above like a Tooltip widget) and create a Widget similar to Snackbar Widget

edited Sep 18 '19 at 12:40

Nico Griffioen

5,143
2
27
36

answered Sep 18 '19 at 12:01

Sahandevs

1,120
9
25

score 2 · Answer 4 · answered Sep 18 '19 at 11:47

2

I'm afraid you can't do that.

A lightweight message with an optional action which briefly displays at the bottom of the screen.

You can just change it's behavior and elevation

answered Sep 18 '19 at 11:47

siega

2,508
1
19
22

score 1 · Answer 5 · edited Jan 15 '22 at 12:39

1

You can use Flushbar instead of SnackBar

check it for more detail

flushbar

Note: It has been discontinued as on 2022

edited Jan 15 '22 at 12:39

Indrajeet Singh

62
2
10

answered Aug 04 '20 at 16:02

Ali Yousefi

19
4

2

due the discontinuation you might want to check [another_flushbar](https://pub.dev/packages/another_flushbar) – Osman Apr 07 '22 at 15:08

score 1 · Answer 6 · answered Dec 11 '20 at 06:38

1

Works for me:

You can wrap your container with 'Align'.

SnackBar(
    content: GestureDetector(
      onTap: () {
        controller?.close();
      },
      child: Align(
        alignment: Alignment.topCenter,
        child: Container( ........

answered Dec 11 '20 at 06:38

IvanPavliuk

1,460
1
21
16

score 0 · Answer 7 · answered Feb 07 '23 at 09:34

Bit late to the party but it's possible to use a ScaffoldMessenger to control the positioning. See https://docs.flutter.dev/release/breaking-changes/scaffold-messenger

Instead of using

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

You then wrap a Scaffold that you've positioned in your UI with a ScaffoldMesseneger and given it a key. Use this key to then show the snackBar:

final key = GlobalKey<ScaffoldMessengerState>();
ScaffoldMessenger(
      key: key,
      child: Scaffold(
        body: ...
...
key.currentState?.showSnackBar(snackBar);

Change position of a Flutter Snackbar

7 Answers7

Linked