import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  ServicesBinding.instance.keyboard.addHandler((event) {
    if (event is KeyDownEvent) {
      print('KeyDownEvent: ${event.logicalKey.keyLabel}');
    }

    return true;
  });

  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: FocusTraversalGroup(
          policy: ReadingOrderTraversalPolicy(
            requestFocusCallback:
                (node, {alignment, alignmentPolicy, curve, duration}) =>
                    FocusTraversalPolicy.defaultTraversalRequestFocusCallback(
                      node,
                      alignment: alignment,
                      alignmentPolicy: alignmentPolicy,
                      curve: curve ?? Curves.easeInOut,
                      duration: duration ?? Duration(milliseconds: 250),
                    ),
          ),
          child: Column(
            spacing: 32,
            children: [
              SizedBox(
                width: double.infinity,
                child: FocusFilledButton(debugLabel: 'sticky button'),
              ),
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    spacing: 32,
                    children: [
                      for (var i in List.generate(10, (i) => i))
                        SizedBox(
                          height: 200,
                          child: ListView.separated(
                            scrollDirection: Axis.horizontal,
                            itemCount: 10,
                            itemBuilder: (context, index) => AspectRatio(
                              aspectRatio: 1,
                              child: FocusFilledButton(
                                debugLabel: 'button_${i}_$index',
                                color: Colors.primaries[i % Colors.primaries.length],
                              ),
                            ),
                            separatorBuilder: (_, _) => SizedBox(width: 32),
                          ),
                        ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class FocusFilledButton extends StatefulWidget {
  const FocusFilledButton({super.key, required this.debugLabel, this.color});

  final String debugLabel;

  final Color? color;

  @override
  State<FocusFilledButton> createState() => _FocusFilledButtonState();
}

class _FocusFilledButtonState extends State<FocusFilledButton> {
  late final FocusNode _focusNode = FocusNode(debugLabel: widget.debugLabel);

  bool _isFocused = false;

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

  @override
  Widget build(BuildContext context) {
    return FilledButton(
      style: FilledButton.styleFrom(
        backgroundColor: widget.color,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
      ),
      onPressed: () {},
      onFocusChange: (value) {
        setState(() => _isFocused = value);
      },
      focusNode: _focusNode,
      child: Text(_isFocused ? 'Focused' : widget.debugLabel),
    );
  }
}