I am using a Stack widget in my Flutter app to display a list of products along with a filter UI that slides up from the bottom when triggered. The filter UI is implemented using AnimatedPositioned.
When I expand the filter UI by setting its height to 1.sh (full screen, equivalent to "MediaQuery.of(context).size.height"), it correctly covers the entire screen, but the top portion gets hidden behind the AppBar. This happens on both Android and iOS virtual devices.
How can I make sure the filter UI appears above the AppBar and is fully visible?
class _FilterScreenState extends ConsumerState<FilterScreen> {
@override
Widget build(BuildContext context) {
debugPrint("Building whole filter ui");
return GradientScaffold(
hPadding: 0.w,
isScollable: false,
appBar: _buildAppBar(context),
body:
Stack(children: [_buildAdsList(context), _showFilterSheet()]));
}
AppBar _buildAppBar(BuildContext context) {
return myAppBar(
context: context,
title: "Filter Top Products");
}
Widget _buildAdsList(BuildContext context) {
return Positioned.fill(
child: ListView.builder(
shrinkWrap: true,
itemCount: 1,
padding: EdgeInsets.symmetric(horizontal: ThemeConstants.hPadding),
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => AppNavigator.navigateTo(context,
wRoute:
AdsDetails(showActionButtons: true, prodModel: null)),
child: ProductBannerCard(
url: "",
advModel: null,
isChild: buildAdSection(context, advModel: null)));
}));
}
Widget _showFilterSheet() {
final double appBarHeight = _buildAppBar(context).preferredSize.height;
final double finalHeight = (1.sh) - appBarHeight;
return Consumer(builder: (context, ref, _) {
final isOpen = ref.watch(filterSheetToggleProvider);
// debugPrint("Rebuilding filter sheet consumer");
return AnimatedPositioned(
duration: const Duration(milliseconds: 300),
bottom: isOpen ? (0) : -finalHeight,
left: 0,
right: 0,
height: finalHeight,
child: widget.filterSheet);
});
}
}