How to change the padding of the snackbar in flutter

Question

How can I set spaces to snackbar from bottom and left/right sides?

score 0 · Answer 1 · answered Dec 12 '19 at 19:16

Snackbars are somewhat difficult to change. I have found a package that is very easy to use and you can customize it however you like that will give you the same look as a snack bar with all of the customizational properties.

The Package is called FlushBar

This package is available for IOS and Android. I have personally used it and it works great. Additionally, you can use FlushBar without the use of a scaffold, where as with a snackbar you have to be able to refer to a scaffold to show a snackbar. Like so,

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

Here is a snippet that they provide to use the flushbar.

class YourAwesomeApp extends StatelessWidget {



@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YourAwesomeApp',
      home: Scaffold(
        Container(
          child: Center(
            child: MaterialButton(
              onPressed: (){
                Flushbar(
                  title:  "Hey Ninja",
                  message:  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
                  duration:  Duration(seconds: 3),              
                )..show(context);
              },
            ),
          ),
        ),
      ),
    );
  }
}

I know flushbar. The flushbar in the structure I used caused different problems. I don't want to use it. — katre, Dec 12 '19 at 19:40

score 0 · Answer 2 · answered Dec 12 '19 at 19:31

0

Try flushbar, use margin property to give space.

Flushbar(
  message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    size: 28.0,
    color: Colors.blue[300],
    ),
  duration: Duration(seconds: 3),
  leftBarIndicatorColor: Colors.blue[300],
  margin: EdgeInsets.all(8),
  borderRadius: 8,
)..show(context);

OUTPUT:

answered Dec 12 '19 at 19:31

Ravinder Kumar

7,407
3
28
54

Flushbar, causes image refresh errors in a list where I repeatedly delete and undo. Therefore do not want to use flushbar. – katre Dec 18 '19 at 16:30

score 0 · Answer 3 · edited Dec 15 '21 at 07:05

0

You can wrap the content (text) of the snackbar with Container and provide margin or padding per your need. Working code sample below:

final snackBar = SnackBar(
            content: Container(
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.only(left: 100, right: 50, bottom: 5),
              child: Text('Yay! A SnackBar!'),
            )

enter image description here

edited Dec 15 '21 at 07:05

Nimantha

6,405
6
28
69

answered Dec 13 '19 at 04:23

Darshan

10,550
5
49
61

I'm trying to give margin and padding to the edges, not to the content of the snackbar. – katre Dec 18 '19 at 16:24

Anil Chauhan · Answer 4 · 2019-12-19T05:49:34.103

Try with this : A temporary solv:

Scaffold.of(context).showSnackBar(
    SnackBar(
       backgroundColor: Colors.transparent,
       content: Container(
         width: MediaQuery.of(context).size.width * 9,
         height: 30.0,
         color: Colors.red,
         padding: EdgeInsets.only(left: 100, right: 50, bottom: 5),
         child: Center(child:Text('Yay! A SnackBar!')),
      )
     )
   );

Or

Scaffold.of(context).showSnackBar(
   SnackBar(
      backgroundColor: Colors.transparent,
      content: Container(
      width: MediaQuery.of(context).size.width * 9,
      height: 30.0,
      decoration: BoxDecoration(
         color: Colors.red,
         borderRadius: BorderRadius.circular(10.0)
      ),
      padding: EdgeInsets.only(left: 100, right: 50, bottom: 5),
      child: Center(
         child:Text('Yay! A SnackBar!')
         ),
       )
      )
   );

Unfortunately, I didn't get a good look like this. Also, the shape is not applicable. (shape: RoundedRectangleBorder (borderRadius: BorderRadius.all (Radius.circular (10)))). — katre, Dec 18 '19 at 16:41
@katre what you want to achieve? And for a circular container, you can just add "borderRadius: BorderRadius.circular(10.0)" . — Anil Chauhan, Dec 19 '19 at 04:09

score 0 · Answer 5 · edited Dec 15 '21 at 07:03

0

You can try this:

final snackBar = SnackBar(
    elevation: 6.0,
    behavior: SnackBarBehavior.floating,
    content: Text(
        "Snack bar test",
        style: TextStyle(color: Colors.white),
    ),
);

The main change here is the presence of the behavior attribute in the SnackBar class, that takes a SnackBarHehavior attribute as value.

edited Dec 15 '21 at 07:03

Nimantha

6,405
6
28
69

answered Dec 13 '19 at 14:06

Steve

914
8
17

To use the SnackBarBehavior.floating parameter, the page must have a bottom navigation bar. Otherwise floating will not work. – katre Dec 18 '19 at 16:20

score 0 · Answer 6 · answered Oct 26 '21 at 08:55

Add behaviour property to Snackbar as SnackBarBehavior.floating. See the code below.

ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Error from Stripe: ${e.error.localizedMessage}'),
        behavior: SnackBarBehavior.floating, // this will add margin to the snackbar
      ),
    )

How to change the padding of the snackbar in flutter

6 Answers6