Repository: flutter
Issue: Focus traversal is unintuitive after requestFocus
Labels: framework,f: material design,has reproducible steps,P2,found in release: 2.2,team-design,triaged-design

When focusing a widget using `requestFocus`, the focus traversal with the arrow keys is unintuitive.

## Steps to Reproduce

```dart
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}'),
                ),
              ),
          ],
        ),
      ),
    );
  }
}
```

1. Run above code using Flutter Web (Also reproducible on mobile emulator or with keyboard connected)
2. See that **Button 5** is focused
3. Press 3x the arrow down key --> Now **Button 8** is focused
4. Press enter --> The focus jumps to **Button 5** again
5. Press the arrow up key

**Expected results:** When going up from **Button 5**, **Button 4** should get focused

**Actual results:** **Button 7** gets focused


https://user-images.githubusercontent.com/5501487/124553757-6c81a200-de35-11eb-8011-f370a46c313a.mp4

<details>
  <summary>Flutter Doctor</summary>

```
[✓] Flutter (Channel master, 2.3.0-17.0.pre.414, on Fedora 33 (Workstation Edition) 5.12.11-200.fc33.x86_64, locale de_DE.UTF-8)
    • Flutter version 2.3.0-17.0.pre.414 at /home/marcus/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 757c3add14 (vor 2 Wochen), 2021-06-20 22:29:02 -0400
    • Engine revision 9520bb15b3
    • Dart version 2.14.0 (build 2.14.0-228.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/marcus/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /home/marcus/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /home/marcus/android-studio
    • Flutter plugin version 54.1.1
    • Dart plugin version 201.9335
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.57.1)
    • VS Code at /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114

• No issues found!
```

</details>