在 Flutter 中创建信息弹出窗口

Question

如何在 Flutter 中创建类似于附图的信息弹出窗口？

Answer 1

截图：

---

你可以玩弄这些价值观。我只是给你一个如何实现这一目标的想法。

完整代码：

class HomePage extends StatelessWidget {
  final GlobalKey _key = GlobalKey();

  void _showOverlay(context) async {
    final box = _key.currentContext.findRenderObject() as RenderBox;
    final offset = box.localToGlobal(Offset.zero);
    final entry = OverlayEntry(
      builder: (_) => Positioned(
        top: offset.dy - 40,
        left: offset.dx - 120,
        child: _buildInfo(),
      ),
    );

    Overlay.of(context).insert(entry);
    await Future.delayed(Duration(seconds: 4));
    entry.remove();
  }

  Widget _buildInfo() {
    return Material(
      child: Container(
        color: Colors.red[200],
        padding: EdgeInsets.all(12),
        child: Text('This is an info button'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('What is this'),
            IconButton(
              key: _key,
              icon: Icon(Icons.info),
              onPressed: () => _showOverlay(context),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

检查这个库你可能会找到你的解决方案 弹出窗口：https://pub.dev/packages/popover， 弹出菜单：https://pub.dev/packages/popup_menu/example