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,
        ),
      ),
    );
  }
}

user_7865164 · Answer

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!"),
);

user_9554350 · Answer

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,);

user_2719437 · Answer

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

user_6877472 · Answer

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

user_12421038 · Answer

You can use Flushbar instead of SnackBar

check it for more detail

flushbar

Note: It has been discontinued as on 2022

user_5981912 · Answer

Works for me:

You can wrap your container with 'Align'.

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

Change position of a Flutter Snackbar

6 Answers