create info popup in Flutter

Question

How do I create an info popup in Flutter similar to the attached image?

Answer 1

Screenshot:

---

You can play with the values. I am just giving you an idea how you can achieve that.

Full code:

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),
            ),
          ],
        ),
      ),
    );
  }
}