重叠面板 Pub

为您的应用添加类似Discord的导航。演示项目请访问：overlapping_panels_demo

Demo

待办事项

此小部件尚不支持导航事件。因此，按下back按钮不会将main面板滑回视图。此功能将在不久的将来实现。

用法

简单明了。只需为所有面板提供常规小部件

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 `OverlappingPanelsState.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
              }
            });
          },
        ),
      ],
    );
  }
}

例如，要通过点击按钮来显示面板，请这样做

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

GitHub

查看 Github