Flutter覆盖层弹窗插件 overlay_popup_dialog 的使用

overlay_popup_dialog 是一个用于在点击的控件上方、下方、左侧、右侧或顶部显示动画平滑覆盖层的Flutter插件。它提供了高度自定义的弹窗功能，支持多种触发方式和动画效果。

功能特点

• 支持在上、下、左、右或点击的控件上显示覆盖层。
• 可以根据需求自定义覆盖层。
• 使用控制器调用打开和关闭覆盖层的功能。
• 控制器支持多种动画方向（例如从上到下，从左到右等）。
• 当覆盖层打开时可以显示高亮按钮。

开始使用

添加依赖

首先，在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  overlay_popup_dialog: ^latest_version

请将^latest_version替换为最新版本号，可以通过Pub.dev获取。

导入包

然后导入必要的包：

import 'package:overlay_popup_dialog/overlay_popup_dialog.dart';

示例代码

下面是一个完整的示例代码，演示如何使用overlay_popup_dialog来创建一个带有过滤选项的按钮，并在其上显示一个覆盖层对话框。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OverlayPopupDialog Playground',
      home: const HomePage(),
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        expansionTileTheme: ExpansionTileThemeData(
          backgroundColor: Colors.lightBlue[100],
          collapsedBackgroundColor: Colors.grey[200],
        ),
      ),
    );
  }
}

class CategoryModel {
  final String name;
  final IconData icon;
  bool isSelected;

  CategoryModel({
    required this.name,
    required this.icon,
    this.isSelected = false,
  });
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final OverlayPopupDialogController _overlayController;

  @override
  void initState() {
    super.initState();
    _overlayController = OverlayPopupDialogController();
  }

  @override
  void dispose() {
    _overlayController.dispose();
    super.dispose();
  }

  final List<CategoryModel> categories = [
    CategoryModel(name: 'All', icon: Icons.all_inclusive),
    CategoryModel(name: 'Food', icon: Icons.fastfood),
    CategoryModel(name: 'Drink', icon: Icons.local_drink),
    CategoryModel(name: 'Dessert', icon: Icons.icecream),
  ];

  List<CategoryModel> selectedCategories = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('OverlayPopupDialog Playground'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Align(
            alignment: Alignment.center,
            child: OverlayPopupDialog(
              controller: _overlayController,
              highlightChildOnBarrier: false,
              scaleBegin: 0.1,
              triggerWithLongPress: true,
              highlightBorderRadius: const BorderRadius.all(
                Radius.circular(16),
              ),
              highlightPadding: 4,
              overlayLocation: OverlayLocation.top,
              animationDuration: const Duration(seconds: 1),
              dialogChild: Container(
                margin: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Theme.of(context).dialogBackgroundColor,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const SizedBox(height: 16),
                    Text(
                      'Filter Categories',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                    Wrap(
                      spacing: 8,
                      runSpacing: 8,
                      children: categories.map((category) {
                        return ChoiceChip(
                          label: Text(category.name),
                          selected: category.isSelected,
                          onSelected: (value) {
                            setState(() {
                              category.isSelected = value;
                              if (!selectedCategories.contains(category)) {
                                selectedCategories.add(category);
                              } else {
                                selectedCategories.remove(category);
                              }
                            });
                          },
                        );
                      }).toList(),
                    ),
                    const SizedBox(height: 16),
                  ],
                ),
              ),
              child: OutlinedButton(
                onPressed: () {
                  _overlayController.show();
                },
                child: Text(selectedCategories.isEmpty
                    ? 'Filter Categories'
                    : 'Filtered Categories (${selectedCategories.length})'),
              ),
            ),
          ),
          ...selectedCategories.map((category) => Text(category.name)),
        ],
      ),
    );
  }
}

这个示例展示了如何创建一个带有过滤选项的按钮，并在点击该按钮时显示一个覆盖层对话框。你可以根据自己的需求调整覆盖层的位置、动画效果和其他属性。