Flutter中使用minikin/popover组件时箭头不显示问题求助

我在布局中使用minikin/popover包展示popover，popover能正常显示，但下方的箭头几乎不可见（仅能看到微弱阴影）。另外，当把popover的width从120调整到250（因设备而异）时，popover才能完整显示，我猜测将popover置于蓝色方块上方居中位置可以解决问题，请问该如何实现？

代码示例 #

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox.square(
            dimension: 300.0,
            child: Builder(
              builder: (context) {
                return GestureDetector(
                  onTap: () {
                    showPopover(
                      context: context,
                      width: 250.0,
                      height: 50.0,
                      arrowHeight: 15.0,
                      arrowWidth: 30.0,
                      direction: PopoverDirection.top,
                      bodyBuilder: (_) {
                        return Center(child: const Text('Popover'));
                      },
                    );
                  },
                  child: Container(color: Colors.blue),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

复现步骤 #

• 创建新的Flutter应用
• 将上述代码粘贴至main.dart文件
• 执行flutter pub add popover
• 启动应用
• 点击蓝色方块

版本信息 #

$ flutter --version
Flutter 3.29.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ea121f8859 (11 days ago) • 2025-04-11 19:10:07 +0000
Engine • revision cf56914b32
Tools • Dart 3.7.2 • DevTools 2.42.3

$ flutter pub deps | grep popover
└── popover 0.3.1

解决方案 #

1. 修复箭头不可见问题 #

箭头微弱是因为默认样式对比度不足，通过指定backgroundColor和shadow参数，让箭头与背景形成清晰区分：

2. 实现居中定位 #

通过attachment: PopoverAttachment.center设置popover在触发元素上方居中，配合offset调整垂直间距。

完整修改代码 #

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox.square(
            dimension: 300.0,
            child: Builder(
              builder: (context) {
                return GestureDetector(
                  onTap: () {
                    showPopover(
                      context: context,
                      width: 250.0,
                      height: 50.0,
                      arrowHeight: 15.0,
                      arrowWidth: 30.0,
                      direction: PopoverDirection.top,
                      // 设置居中附着
                      attachment: PopoverAttachment.center,
                      // 调整与蓝色方块的垂直间距
                      offset: const Offset(0, -10),
                      // 明确背景色
                      backgroundColor: Colors.white,
                      // 添加阴影增强视觉层次
                      shadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 5,
                          offset: const Offset(0, 2),
                        ),
                      ],
                      bodyBuilder: (_) {
                        return const Center(child: Text('Popover'));
                      },
                    );
                  },
                  child: Container(color: Colors.blue),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

修改后popover会居中显示在蓝色方块上方，箭头因明确的样式设置变得清晰可见。

内容的提问来源于stack exchange，提问作者goofy4224