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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Focus Traversal Bug',
      home: Shortcuts(
        shortcuts: {
          // Focus traversal using keyboard is not enabled by default on the web
          LogicalKeySet(LogicalKeyboardKey.arrowLeft):
              const DirectionalFocusIntent(TraversalDirection.left),
          LogicalKeySet(LogicalKeyboardKey.arrowRight):
              const DirectionalFocusIntent(TraversalDirection.right),
          LogicalKeySet(LogicalKeyboardKey.arrowDown):
              const DirectionalFocusIntent(TraversalDirection.down),
          LogicalKeySet(LogicalKeyboardKey.arrowUp):
              const DirectionalFocusIntent(TraversalDirection.up),
        },
        child: DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatelessWidget {
  final _fifthFocusNode = FocusNode();

  DemoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Focus Traversal Bug Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            for (var i = 0; i < 10; i++)
              Padding(
                padding: const EdgeInsets.all(5.0),
                child: ElevatedButton(
                  focusNode: i == 4 ? _fifthFocusNode : null,
                  autofocus: i == 4,
                  onPressed: () => _fifthFocusNode.requestFocus(),
                  child: Text('Button ${i+1}'),
                ),
              ),
          ],
        ),
      ),
    );
  }
}