custom_ink_well.dart

// results: http://screens.gskinner.com/shawn/7BMqIUaAVi.mp4

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

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

/// Use `FocusableControlBuilder` to create our own full custom button.
/// It is about 40 lines of code to handle gestures and add a focus node, which in turn wraps
/// FocusableActionDetector which is another 80 lines or so dealing with actions, mouse regions and focus
class _MyBtn extends StatelessWidget {
  const _MyBtn(this.child, {Key? key, required 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: Material(child: InkWell(onTap: onPressed))),
              IgnorePointer(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 32),
                  child: child,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}