inkwell-effect.dart

// Basic structure for inkwell effect
// renders: http://screens.gskinner.com/shawn/vxKbE9nX0x.mp4

class _ButtonTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _MyBtn(Text('Yo'), onPressed: () => print('yo')),
        _MyBtn(Text('Yo'), onPressed: () => print('yo')),
      ],
    ));
  }
}

class _MyBtn extends StatelessWidget {
  const _MyBtn(this.child, {Key key, this.onPressed}) : super(key: key);
  final Widget child;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
      onPressed: onPressed,
      builder: (_, state) {
        return Container(
          decoration: BoxDecoration(
            color: state.isHovered ? Colors.grey.shade300 : Colors.grey.shade300.withOpacity(.9),
            border: Border.all(color: Colors.blue.withOpacity(state.isFocused ? 1 : 0)),
          ),
          child: Stack(
            children: [
              Positioned.fill(child: _SquareInkwell(onPressed: onPressed)),
              IgnorePointer(
                  child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 32),
                child: child,
              )),
            ],
          ),
        );
      },
    );
  }
}

class _SquareInkwell extends StatefulWidget {
  const _SquareInkwell({Key key, this.onPressed}) : super(key: key);
  final VoidCallback onPressed;

  @override
  State<_SquareInkwell> createState() => _SquareInkwellState();
}

class _SquareInkwellState extends State<_SquareInkwell> {
  Offset _offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (d) {
        setState(() => _offset = d.localPosition);
        widget.onPressed?.call();
        //TODO: Kick off inkwell animation starting from _offset
      },
      onTapUp: (_) {
        //TODO: stop inkwell anim
      },
      child: Stack(
        children: [
          Positioned.fill(child: Container(color: Colors.transparent)),
          // Position red dot at the position of the tap
          Positioned(left: _offset.dx - 6, top: _offset.dy - 6, child: CircleAvatar(radius: 6)),
        ],
      ),
    );
  }
}