Flutter - How to decrease the height of snackbar and increase it's distance from the bottom of screen

user_12810223 0
Viewed 176

I am trying to make a UI which has snackbar like this -

enter image description here

But I am getting the UI -

enter image description here

How can I decrease the width of snackbar, and place it more above the bottom of screen?

Here is the code -

ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          width: MediaQuery.of(context).size.width*0.46,
                          elevation: 5.0,
                          behavior: SnackBarBehavior.floating,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(35.0)),
                          content: Wrap(
                            children: [
                              Container(
                                //height: 20,
                                child: Center(
                                  child: Text(
                                    'Please enter valid email',
                                  ),
                                ),
                              ),
                            ],
                          ),
                        )
                      );

I tried giving margin to snackbar like -

SnackBar(
                          width: MediaQuery.of(context).size.width*0.46,
                          elevation: 5.0,
                          margin: EdgeInsets.fromLTRB(0, 0, 0, 10),

But, it gives me an exception that out of width or margin, one should be null -

Failed assertion: line 210 pos 10: 'width == null || margin == null': Width and margin can not be used together
dart flutter android ios
3 Answers

You can easily use this package : link

this package is ready to use for that you want.

user_167284830

As specified in the doc, margin can not be used if width is specified.

Defining the horizontal margin as 27% of the MediaQuery.of(context).size.width seems to do what you try to achieve:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    margin: EdgeInsets.symmetric(
      vertical: 20.0,
      horizontal: MediaQuery.of(context).size.width * 0.27,
    ),
    elevation: 5.0,
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(35.0),
    ),
    content: Wrap(
      children: const [
        Center(
          child: Text(
            'Please enter valid email',
          ),
        ),
      ],
    ),
  ),
);
user_101185050

Try this, I use this to have two diffrent SnackBar in Ios & Andriode

    void giveFeedback(String message, BuildContext context) {
      bool isIos = Platform.isIOS;
      try {
        ScaffoldMessenger.of(context).hideCurrentSnackBar();
      } catch (e) {
        print(e.toString());
      }
    
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          width: (isIos) ? setWidth(0.94, context) : setWidth(1, context),
          backgroundColor: MyTheme.primaryColor,
          elevation: (isIos) ? 5.0 : 0.0,
          behavior: (isIos) ? SnackBarBehavior.floating : SnackBarBehavior.fixed,
          shape: (isIos) ? RoundedRectangleBorder(borderRadius: BorderRadius.circular(35.0)) : null,
          content: AutoSizeText(
            message.toString(),
            textAlign: TextAlign.center,
            softWrap: true,
            style: TextStyle(
              color: MyTheme.secondaryColor,
              fontSize: (isIos) ? 14 : 12,
            ),
          ),
        ),
      );
    }

double setWidth(double sh, BuildContext context) {
  return MediaQuery.of(context).size.width * sh;
}

You can design so many patterns by using this SnackBar function

user_148167500
Related