material state example

main.dart

import 'package:flutter/material.dart';

class ButtonStyleOverlay {
  const ButtonStyleOverlay();
  Color call(Set<MaterialState> states) {
    if (states.contains(MaterialState.focused)) {
      return Colors.white;
    }
    if (states.contains(MaterialState.hovered)) {
      return Colors.orange;
    }
    if (states.contains(MaterialState.pressed)) {
      return Colors.yellowAccent;
    }
    return Colors.transparent;
  }
}

void main() => runApp(const MaterialApp(home: MyWidget()));

class MyWidget extends StatefulWidget {
  final double dimension;
  final double padding;
  final Color backgroundColor;
  const MyWidget({
    this.dimension = 100,
    this.padding = 20,
    this.backgroundColor = Colors.blue,
    super.key,
  });

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late final FocusNode _focusNode;

  @override
  void initState() {
    _focusNode = FocusNode();
    super.initState();
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Center(
        child: SizedBox.square(
          dimension: widget.dimension,
          child: ColoredBox(
            color: widget.backgroundColor,
            child: Padding(
              padding: EdgeInsets.all(widget.padding),
              child: TextButton(
                focusNode: _focusNode,
                onPressed: () => _focusNode.hasFocus
                    ? _focusNode.unfocus()
                    : _focusNode.requestFocus(),
                style: ButtonStyle(
                  overlayColor: MaterialStateProperty.resolveWith<Color>(
                    const ButtonStyleOverlay(),
                  ),
                ),
                child: const Text(
                  'Hi',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          ),
        ),
      );
}