'How do i open sliding up panel that will cover all of the parent widgets higher in the tree?
I'm not sure how to properly ask this question in a semi coherent manner, so I will give context to the situation.
This is kind of a social network app, so it has posts in it. You can report these posts by pressing a button on these posts, which opens a sliding up panel at the top of the tree. And I have a few pages that have post list in them, but they are in this said main page.
Instead of constantly passing a callback function which opens this sliding up panel on mainPage, i wanted to place this sliding up panel in the post item widget itself. I tried to implement this, and it does work, but not how I want it to. It only covers the listView that has these postItemWidgets, instead of the entire screen. It should have covered the entire screen, AppBar and bottomNavBar included, but it doesn't do that.
I'm pretty sure there is at least some way of doing this, but I genuinely have no idea how to properly formulate a question to google.
Thank you for any help.
Here is mainPage code:
@override
Widget build(BuildContext context) {
return VisibilityDetector(
key: Key("MainPage"),
onVisibilityChanged: (VisibilityInfo info) {
_isVisible = info.visibleFraction == 1.0;
},
child: GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
top: false,
bottom: false,
child: SlidingUpPanel(
maxHeight: 600.h,
backdropEnabled: true,
color: Colors.transparent,
collapsed:
Container(decoration: BoxDecoration(color: Colors.grey)),
minHeight: 0,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(
UiConstants.reportDialogBorderRadiusTopLeftRight),
topRight: Radius.circular(
UiConstants.reportDialogBorderRadiusTopLeftRight),
),
panel: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: StreamBuilder(
stream: _bloc.openReportPageStream,
builder: (context, snapshot) {
if (snapshot.data is ReportPageModelState) {
ReportPageModelState state =
snapshot.data as ReportPageModelState;
return Center(
child: ReportMainPageWidgets(
_bloc, edit, removeSome, state.model),
);
} else {
return Center(
child: ReportMainPageWidgets(
_bloc, edit, removeSome, _bloc.postModelForEditing),
);
}
}),
),
controller: _panelController,
onPanelClosed: () {
_bloc.reportWidgetState = ReportWidgetState.loading;
_bloc.setPanelState();
},
onPanelOpened: () {
_bloc.setPanelState();
},
body: Scaffold(
extendBody: true,
body: Scaffold(
body: _openPageStreamWidget(),
bottomNavigationBar: _bottomAppBarWidget(),
),
bottomNavigationBar: _navBarStreamWidget(),
),
),
),
),
),
);
}
And this is the callback function that opens the sliding up panel:
void clickOnPostReport(int id) {
if (id != _bloc.id) {
_bloc.editPostModel(id).then((value) {
_bloc.postModelForEditing = value;
print("server request");
_bloc.reportWidgetState = value.author.id == MainBloc.user.id
? ReportWidgetState.editing
: ReportWidgetState.report;
_panelController.open();
});
} else {
_bloc.reportWidgetState =
_bloc.postModelForEditing.author.id == MainBloc.user.id
? ReportWidgetState.editing
: ReportWidgetState.report;
_panelController.open();
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
