Flutter简易覆盖层插件simple

Flutter简易覆盖层插件simple_overlay的使用

simple_overlay 是一个简单易用的覆盖层插件。通过它，你可以在任何其他小部件上叠加自定义的小部件。

特性

自定义小部件覆盖；
构建时自动显示；
持续时间后自动隐藏；
点击外部区域后隐藏；
控制器具有显示/隐藏功能；
可自定义背景阴影颜色/透明度；

开始使用

1. 在 `pubspec.yaml` 中添加依赖项

dependencies:
  simple_overlay: ^1.0.0

2. 导入 SimpleOverlay 包

在你的文件中添加以下导入语句：

import 'package:simple_overlay/simple_overlay.dart';

3. 创建 SimpleOverlayWidget

SimpleOverlayWidget(
  controller: SimpleOverlayController(),
  configuration: SimpleOverlayConfiguration(
    startShowing: false,
    hideOnTapOutside: true,
    autoHideDuration: const Duration(seconds: 5),
    shadowColor: Colors.black,
    shadowOpacity: 0.5,
    onShowOverlay: () {
      // 显示覆盖层后调用
    },
    onHideOverlay: () {
      // 隐藏覆盖层后调用
    },
  ),
  position: SimpleOverlayPosition.topLeft(),
  overlayWidget: _overlayWidget,
  child: _child,
)

4. 手动显示/隐藏覆盖层

final controller = SimpleOverlayController();
...
controller.show(); // 显示覆盖层
controller.hide(); // 隐藏覆盖层

完整示例

以下是一个完整的示例代码，展示了如何使用 simple_overlay 插件来创建一个简单的覆盖层。

import 'package:flutter/material.dart';
import 'package:simple_overlay/simple_overlay.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);

  final controller = SimpleOverlayController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('simple_overlay 示例')),
      body: Center(
        child: SimpleOverlayWidget(
          controller: controller,
          configuration: SimpleOverlayConfiguration(
            startShowing: false,
            hideOnTapOutside: true,
            autoHideDuration: null,
            shadowColor: Colors.black,
            shadowOpacity: 0.5,
            onShowOverlay: () {
              // 显示覆盖层后调用
              print('onShowOverlay');
            },
            onHideOverlay: () {
              // 隐藏覆盖层后调用
              print('onHideOverlay');
            },
          ),
          position: SimpleOverlayPosition.topLeft(),
          overlayWidget: _overlayWidget,
          child: _child,
        ),
      ),
    );
  }

  Widget get _overlayWidget => const Card(
        child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Text('simple_overlay'),
        ),
      );

  Widget get _child {
    return ElevatedButton(
      onPressed: () {
        if (controller.state.value) {
          controller.hide();
        } else {
          controller.show();
        }
      },
      child: const Text("显示/隐藏"),
    );
  }
}

更多关于Flutter简易覆盖层插件simple_overlay的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter简易覆盖层插件simple_overlay的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter中使用simple_overlay插件的一个基本示例代码。simple_overlay插件可以帮助你轻松地在Flutter应用中创建覆盖层（Overlay）。

首先，确保你已经在pubspec.yaml文件中添加了simple_overlay依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_overlay: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来是一个简单的示例代码，展示如何使用simple_overlay插件：

import 'package:flutter/material.dart';
import 'package:simple_overlay/simple_overlay.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Overlay Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final overlayController = OverlayController();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            showOverlay(context, overlayController);
          },
          child: Text('Show Overlay'),
        ),
      ],
    );
  }

  void showOverlay(BuildContext context, OverlayController overlayController) {
    overlayController.show(
      context: context,
      builder: (context) => SimpleOverlay(
        child: Center(
          child: Material(
            elevation: 8.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16.0),
            ),
            child: Container(
              width: 200,
              height: 100,
              color: Colors.white,
              child: Center(
                child: Text('This is an overlay!'),
              ),
            ),
          ),
        ),
        backgroundColor: Colors.black54,
        barrierDismissible: true,
      ),
    );
  }
}

在这个示例中，我们做了以下事情：

引入simple_overlay包。
创建一个基本的Flutter应用，其中包含一个按钮。
当按钮被点击时，调用showOverlay函数来显示覆盖层。
showOverlay函数使用OverlayController来显示一个包含简单文本的覆盖层。

注意：

SimpleOverlay组件是simple_overlay包提供的一个方便的工具，用于创建覆盖层。
backgroundColor属性设置覆盖层的背景颜色。
barrierDismissible属性设置为true，表示点击覆盖层背景可以关闭覆盖层。

你可以根据需要进一步自定义覆盖层的内容和样式。希望这个示例代码能帮助你理解如何在Flutter中使用simple_overlay插件。

Flutter简易覆盖层插件simple_overlay的使用