focusable_control_builder 0.1.0+1

Easily create custom controls that respond correctly to mouse and keyboard.

focusable_control_builder

Provides a builder to easily create custom controls that respond correctly to mouse and keyboard.

This includes:

• on press support
• keyboard traversal / focus support
• mouse hover / cursor
• keyboard submission on [Enter] or [Space]

Usage

To create a custom button just implement the FocusableControlBuilder.builder method and assign an onPressed handler:

class MyCustomButton extends StatelessWidget {
  const MyCustomButton(this.label, {Key? key, required this.onPressed}) : super(key: key);
  final String label;
  final VoidCallback onPressed;
  @override
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
        onPressed: onPressed,
        builder: (_, FocusableControlState control) {
          // Decide which colors to use, based on .isFocused and .isHovered
          Color outlineColor = control.isFocused ? Colors.black : Colors.transparent;
          Color bgColor = control.isHovered ? Colors.blue.shade100 : Colors.grey.shade200;
          // Return custom button contents
          return Container(
            padding: const EdgeInsets.all(8),
            child: Text(label),
            decoration: BoxDecoration(
              color: bgColor,
              border: Border.all(color: outlineColor, width: 1),
            ),
          );
        });
  }
}