flutter pub add overlapping_panels基于插件公开信息、社区数据与项目使用情况整理的选型参考。
OverlappingPanels 是一个 Flutter 包，可帮助开发者实现受 Discord 移动界面启发的左右导航面板。它支持基于手势的面板揭示动画，并提供回调以监控面板状态变化。适用于需要直观、可滑动侧边导航且在 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台上实现流畅过渡的应用。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Add Discord-like navigation to your app. Demo project here: overlapping_panels_demo
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.
Simple and straight to the point. Just provide usual widgets for all panels:
class _MyHomePageState extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
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) {
return const LeftPage();
}),
right: Builder(
builder: (context) => const RightPage(),
),
main: Builder(
builder: (context) {
return const MainPage();
},
),
onSideChange: (side) {
setState(() {
if (side == RevealSide.main) {
// hide something
} else if (side == RevealSide.left) {
// show something
}
});
},
),
],
);
}
}
To be able to reveal a panel with the tap of a button, for example, do:
IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
// This is the main point
OverlappingPanels.of(context)?.reveal(RevealSide.left);
},
)