Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any way to achieve a Flutter top snackbar?

Tags:

I want to create a simple snackbar that come from top of the screen instesd of bottom.In flutter i have used native snackbar but it does not have such feature.

like image 268
Ravi Avatar asked Jan 15 '19 08:01

Ravi


People also ask

How do you show SnackBar on top in Flutter?

top-snackbar-flutter If you need to show the user some information in a nice way, you can use this package. The API is as simple as API for regular Material method showDialog . If you need to use your own widget to display, you can pass it into showTopSnackBar function.

What can I use instead of a SnackBar Flutter?

of() is deprecated for showing SnackBars, use ScaffoldMessenger instead.

How do you show SnackBar in Flutter without scaffolding?

you probably have a parent widget that contains Scaffold as well. Create a scaffoldKey for that and pass it to your child widget that have to show the Snakcbar . Note that you can't use Sanckbar without Scaffold widget.


2 Answers

You can use https://pub.dartlang.org/packages/flushbar

RaisedButton(   child: Text('Show Top Snackbar'),   onPressed: () {     Flushbar(       flushbarPosition: FlushbarPosition.TOP,     )       ..title = "Hey Ninja"       ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"       ..duration = Duration(seconds: 3)       ..show(context);   }, ), 
like image 131
westdabestdb Avatar answered Sep 27 '22 19:09

westdabestdb


You can set a margin using the device's height to achieve this:

ScaffoldMessenger.of(context).showSnackBar(new SnackBar(     content: Text('Snackbar message'),     behavior: SnackBarBehavior.floating,     shape: RoundedRectangleBorder(       borderRadius: BorderRadius.circular(24),     ),     margin: EdgeInsets.only(         bottom: MediaQuery.of(context).size.height - 100,         right: 20,         left: 20),   )); 
like image 26
David Jentjens Avatar answered Sep 27 '22 19:09

David Jentjens