Flutter中如何使用flutter_portal插件

我想在Flutter应用中实现一个下拉菜单效果，看到有推荐使用flutter_portal插件。请问具体该如何集成和使用这个插件？能否提供一个简单的示例代码展示如何创建悬浮在其它widget上方的弹出层？另外这个插件和Overlay有什么区别，在性能和使用场景上该如何选择？

2 回复

在Flutter中使用flutter_portal插件，首先在pubspec.yaml中添加依赖：

dependencies:
  flutter_portal: ^0.6.0

然后导入包：

import 'package:flutter_portal/flutter_portal.dart';

使用示例：

Portal(
  child: Text('内容'),
  overlay: Container(
    color: Colors.white,
    child: Text('悬浮层'),
  ),
)

Portal用于创建悬浮层，可控制显示位置和时机。

更多关于Flutter中如何使用flutter_portal插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用flutter_portal插件可以轻松实现悬浮层、弹窗和覆盖层效果，特别适用于下拉菜单、工具提示或模态框等场景。

安装插件

在pubspec.yaml中添加依赖：

dependencies:
  flutter_portal: ^0.6.0

运行 flutter pub get 安装。

基本用法

  1. Portal：用于定义悬浮层内容的位置。
  2. PortalTarget：指定悬浮层插入的目标位置。

示例：实现下拉菜单

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

class DropdownMenuExample extends StatefulWidget {
  @override
  _DropdownMenuExampleState createState() => _DropdownMenuExampleState();
}

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  bool isMenuOpen = false;

  @override
  Widget build(BuildContext context) {
    return Portal(
      child: Scaffold(
        body: Center(
          child: PortalTarget(
            anchor: Aligned(
              follower: Alignment.topCenter,
              target: Alignment.bottomCenter,
            ),
            portalFollower: isMenuOpen
                ? Container(
                    width: 200,
                    height: 150,
                    color: Colors.white,
                    child: Column(
                      children: [
                        ListTile(title: Text('选项1')),
                        ListTile(title: Text('选项2')),
                        ListTile(title: Text('选项3')),
                      ],
                    ),
                  )
                : null,
            child: TextButton(
              onPressed: () {
                setState(() {
                  isMenuOpen = !isMenuOpen;
                });
              },
              child: Text('打开菜单'),
            ),
          ),
        ),
      ),
    );
  }
}

关键点说明

  • Portal：作为根组件，提供悬浮层插入的上下文。
  • PortalTarget：
    • portalFollower：悬浮层内容，为null时隐藏。
    • anchor：控制悬浮层位置（如Aligned或CustomAnchor）。
  • 通过状态管理控制悬浮层的显示/隐藏。

其他功能

  • 使用CustomAnchor自定义位置。
  • 支持动画和手势交互。

通过flutter_portal可以灵活管理悬浮层，避免Overlay的复杂操作。

回到顶部