Change position of a Flutter Snackbar

mongy910 picture mongy910 · Sep 11, 2018 · Viewed 7.4k times · Source

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

Answer

K Vij picture K Vij · Apr 24, 2020

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