Is there any way to achieve a Flutter top snackbar?

user_8178228 0
Viewed 30737

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.

flutter android ios
4 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);
  },
),
user_69480950

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

Use this package https://pub.dev/packages/another_flushbar

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],
)..show(context);
user_38111620

Wrap your widget with Column and set mainAxisAlignment to MainAxisAlignment.start. Additionally, set SnackBar's color transparent.

Column(
     mainAxisAlignment: MainAxisAlignment.start,
      children: [yourWidget()], ),
user_138055800
Related