Overlapping Panels

Add Discord-like navigation to your app. Demo project here: overlapping_panels_demo

TODO

This widget does not support navigation events yet. So pressing the back button, does not slide the main panel back into view. This feature will be implemented in the nearest future.

Usage

Simple and straight to the point. Just provide usual widgets for all panels:

class_MyHomePageStateextendsStatelessWidget {
@overrideWidgetbuild(BuildContext context) {
returnStack(
children: [
OverlappingPanels(
// Using the Builder widget is not required. You can pass your widget directly. // But to use `OverlappingPanels.of(context)` you need to wrap your widget in a Builder
left:Builder(builder: (context) {
returnconstLeftPage();
}),
right:Builder(
builder: (context) =>constRightPage(),
),
main:Builder(
builder: (context) {
returnconstMainPage();
},
),
onSideChange: (side) {
setState(() {
if (side ==RevealSide.main) {
// hide something
} elseif (side ==RevealSide.left) {
// show something
}
});
},
),
],
);
}
}

To be able to reveal a panel with the tap of a button, for example, do:

IconButton(
icon:constIcon(Icons.menu),
onPressed: () {
// This is the main pointOverlappingPanels.of(context)?.reveal(RevealSide.left);
},
)