Revision history [back]

There are a few steps involved in adding key-based navigation to a search list in a desktop app built with Flutter:

1. First, you need to define the keyboard shortcuts or keys that will be used to navigate the search list items. For example, you could use the up and down arrow keys to move between items.

2. Next, you need to add a KeyHandler widget to your search list. This widget listens for keyboard events and calls a callback function when a specified key combination is pressed.

3. In the callback function, you can update the currently selected search list item based on the key that was pressed. For example, if the user presses the up arrow key, you can select the previous item in the list.

4. Finally, you need to update the UI to reflect the change in the selected item. You can do this by changing the background color of the selected item or adding a border around it.

Here's some example code that demonstrates how to add key-based navigation to a search list:

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

class SearchList extends StatefulWidget {
  final List<String> items;

  SearchList({required this.items});

  @override
  _SearchListState createState() => _SearchListState();
}

class _SearchListState extends State<SearchList> {
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return KeyboardVisibilityBuilder(
      builder: (context, isKeyboardVisible) {
        return Column(
          children: [
            TextField(
              decoration: InputDecoration(
                hintText: 'Search',
                suffixIcon: Icon(Icons.search),
              ),
              onChanged: (value) {
                // TODO: filter the list based on the search query
                setState(() {
                  selectedIndex = -1;
                });
              },
            ),
            Expanded(
              child: KeyHandler(
                keys: [
                  LogicalKeyboardKey.arrowUp,
                  LogicalKeyboardKey.arrowDown,
                ],
                onKey: (event) {
                  setState(() {
                    if (event.logicalKey == LogicalKeyboardKey.arrowUp &&
                        selectedIndex > 0) {
                      selectedIndex--;
                    } else if (event.logicalKey ==
                            LogicalKeyboardKey.arrowDown &&
                        selectedIndex < widget.items.length - 1) {
                      selectedIndex++;
                    }
                  });
                },
                child: ListView.builder(
                  itemCount: widget.items.length,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(
                        color: index == selectedIndex
                            ? Colors.grey.shade200
                            : null,
                        border: Border.all(
                          color: index == selectedIndex
                              ? Colors.grey.shade500
                              : Colors.transparent,
                        ),
                      ),
                      child: ListTile(
                        title: Text(widget.items[index]),
                        onTap: () {
                          setState(() {
                            selectedIndex = index;
                          });
                        },
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}

In this example, we define a SearchList widget that contains a text field for searching and a list view for displaying the search results. We use the KeyboardVisibilityBuilder widget from the flutter_keyboard_visibility package to detect when the keyboard is visible, so we can adjust the UI accordingly.

Inside the ListView.builder, we add a Container around each ListTile to allow us to apply styling to the selected item. We use the KeyHandler widget to listen for arrow key events and call a callback function when they are pressed. In the callback function, we update the state to reflect the newly selected item, and we update the UI to show the selection.