Show a SnackBar Above Modal Bottom Sheet

Viewed 5936

I tried to display a SnackBar above my Modal Bottom Sheet, but it doesn't work. Any idea how to achieve that?

P.S.: Setting the SnackBar Behavior to Floating doesnt work. It still appears below the modal bottom sheet

Thank you

6 Answers

You will need to use GlobalKey<ScaffoldState> to show the Snackbar in desired Scaffold, for that you can added Scaffold in your showModalBottomSheet like below snip;

Define you GlobalKey in your Statefull or Stateless widget class

final GlobalKey<ScaffoldState> _modelScaffoldKey = GlobalKey<ScaffoldState>();

And on button press you can have;


                showModalBottomSheet(
                  context: context,
                  builder: (_) => Scaffold(
                      extendBody: false,
                      key: _modelScaffoldKey,
                      resizeToAvoidBottomInset: true,
                      body: FlatButton(
                        child: Text("Snackbar"),
                        onPressed: () {
                          _modelScaffoldKey.currentState.showSnackBar(SnackBar(
                            content: Text("Snackbar"),
                          ));
                        },
                      )),
                );

DartPad

Just wrap your child widget with Scaffold

await showModalBottomSheet(
   context: context,
   builder: (builder) => Scaffold(
      body: YourModalContentWidget()
   )
);

Thanks @alexey i solve mine this way

showMaterialModalBottomSheet(
  context: context,
  enableDrag: false,
  isDismissible: false,
  expand: false,
  builder: (context) => Container(
  //padding: EdgeInsets.only(bottom: 20),
  height: MediaQuery.of(context).size.height * 0.9, //bottom sheet height
  color: Colors.black.withOpacity(0.0),
  child: Scaffold(
  body: NewTripPopupDialog(kInitialPosition: kInitialPosition))),
);

If you are willing to use third-party package, you can easily do this with GetX.

Just import the package in your pubspec.yaml file:

dependencies:
  get: ^3.17.0

Change your MaterialApp to GetMaterialApp.

GetMaterialApp is necessary for routes, snackbars, internationalization, bottomSheets, dialogs, and high-level apis related to routes and absence of context.

And use Get.bottomSheet() and Get.snackbar(). You have a bunch of properties to customize both methods. If a BottomModalSheet is open and you create a Snackbar it automatically shown above the sheet.

Simple example:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snackbar above Bottom Modal Sheet'),
      ),
      body: SafeArea(
        child: Center(
          child: RaisedButton(
            child: Text('Open Modal Sheet'),
            onPressed: () {
              // Bottom Modal Sheet
              Get.bottomSheet(
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('My bottom modal sheet'),
                    RaisedButton(
                      child: Text('Show SnackBar'),
                      onPressed: () {
                        // Snackbar
                        Get.snackbar(
                          'Hey',
                          'I am a snackbar',
                          snackPosition: SnackPosition.BOTTOM,
                          backgroundColor: Colors.red,
                        );
                      },
                    ),
                  ],
                ),
                backgroundColor: Colors.green,
              );
            },
          ),
        ),
      ),
    );
  }
}

demo

Try setting a margin to the Snackbar according to the BottomSheets height:

SnackBar(behavior: SnackBarBehavior.floating, margin: EdgeInsets.fromLTRB(0, 0, 0, 500),)

Have you tried setting the behavior property to floating?

SnackBar(
  behavior: SnackBarBehavior.floating

This should solve the issue

Related