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
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
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"),
));
},
)),
);
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,
);
},
),
),
),
);
}
}
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