Social Media Button

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey.shade50,
        body: Center(
          child: SocialMediaButton(
            onPressed: () {},
            icon: Text('👍', style: TextStyle(fontSize: 40.0)),
          ),
        ),
      ),
    );
  }
}

class SocialMediaButton extends StatefulWidget {
  final Widget icon;
  @required
  final VoidCallback onPressed;

  const SocialMediaButton({
    Key key,
    this.icon,
    this.onPressed,
  }) : super(key: key);

  @override
  _SocialMediaButtonState createState() => _SocialMediaButtonState();
}

class _SocialMediaButtonState extends State<SocialMediaButton> {
  var _hoveringButton = false;
  Widget _primaryIcon;
  
  @override
  void initState(){
    super.initState();
    _primaryIcon = widget.icon;
  }

  Future<void> _onMouseHover(bool hover) async {
    if (!hover) {
      await Future.delayed(Duration(milliseconds: 1500));
      setState(() {
        _hoveringButton = hover;
      });
    } else {
      setState(() {
        _hoveringButton = hover;
      });
    }
  }

  ScaffoldFeatureController _showSnackBar(BuildContext context, String msg) {
    return Scaffold.of(context).showSnackBar(
      SnackBar(
        duration: Duration(seconds: 2),
        content: Text(msg),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Padding(
          padding: EdgeInsets.only(bottom: 130.0),
          child: _hoveringButton
              ? TooltipOverlay(
                  children: <Widget>[
                    InkWell(
                      hoverColor: Colors.transparent,
                      onTap: () {
                        setState(() {
                          _primaryIcon = Text('👍', style: TextStyle(fontSize: 40.0));
                          _hoveringButton = false;
                        });
                        _showSnackBar(context, 'Liked!');
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5.0),
                        child: Text('👍', style: TextStyle(fontSize: 40.0)),
                      ),
                    ),
                    InkWell(
                      hoverColor: Colors.transparent,
                      onTap: () {
                        setState(() {
                          _primaryIcon = Text('😂', style: TextStyle(fontSize: 40.0));
                          _hoveringButton = false;
                        });
                        _showSnackBar(context, 'Rolling on the floor!');
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5.0),
                        child: Text('😂', style: TextStyle(fontSize: 40.0)),
                      ),
                    ),
                    InkWell(
                      hoverColor: Colors.transparent,
                      onTap: () {
                        setState(() {
                          _primaryIcon = Text('😡', style: TextStyle(fontSize: 40.0));
                          _hoveringButton = false;
                        });
                        _showSnackBar(context, 'I\'m so mad!');
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5.0),
                        child: Text('😡', style: TextStyle(fontSize: 40.0)),
                      ),
                    ),
                  ],
                )
              : Container(),
        ),
        MouseRegion(
          onEnter: (e) => _onMouseHover(true),
          onExit: (e) => _onMouseHover(false),
          child: _primaryIcon,
        ),
      ],
    );
  }
}

class TooltipOverlay extends StatelessWidget {
  const TooltipOverlay({
    Key key,
    this.children,
  }) : super(key: key);

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      child: ButtonBar(
        alignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: children,
      ),
    );
  }
}