Flutter覆盖层创建插件overlay_creator的使用

Flutter覆盖层创建插件overlay_creator的使用

overlay_creator 是一个用于简化在 Flutter 应用程序中创建和管理覆盖层小部件的插件。通过提供一个简单的混入（mixin），你可以轻松地显示自定义覆盖内容，例如模态对话框、提示框或任何浮动小部件，而无需复杂的导航或状态管理。

特性

• 简单集成到现有的 Flutter 项目中。
• 简化了覆盖层小部件的创建和销毁。
• 支持自定义小部件作为覆盖层内容，允许高度定制化的覆盖层。
• 提供回调选项以进一步控制覆盖层的生命周期。

快速开始

要使用 overlay_creator，请按照以下步骤操作：

1. 与你的 StatefulWidget 的 State 混入

   在你的 StatefulWidget 的状态类中添加 OverlayCreator 混入。

   class Homepage extends StatefulWidget {
     const Homepage({super.key});
   
     [@override](/user/override)
     State<Homepage> createState() => _HomepageState();
   }
   
   class _HomepageState extends State<Homepage> with OverlayCreator {
     // 你的小部件构建方法和其他功能
   }
   

2. 显示覆盖层

   使用 displayOverlay 方法来显示你的覆盖层小部件。

   ElevatedButton(
       onPressed: () {
         displayOverlay(
           context: context,
           child: FullOverlayArea(
             background: const GlassBackgroundWD(),
             child: PopupContainerWD(
               removeOverlay: () {
                 removeOverlay();
               },
             ),
           ),
         );
       },
       child: const Text("显示玻璃覆盖层"))
   

3. 移除覆盖层

   当你需要关闭覆盖层时，调用 removeOverlay 方法。

完整示例

以下是一个简单的示例，演示如何使用 overlay_creator 显示自定义覆盖层。

class Main extends StatelessWidget {
  const Main({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  const Homepage({super.key});

  [@override](/user/override)
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> with OverlayCreator {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text(
          "示例",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  displayOverlay(
                    context: context,
                    child: FullOverlayArea(
                      background: const GlassBackgroundWD(),
                      child: PopupContainerWD(
                        removeOverlay: () {
                          removeOverlay();
                        },
                      ),
                    ),
                  );
                },
                child: const Text("显示玻璃覆盖层")),
          ],
        ),
      ),
    );
  }
}