Flutter listview focus item

by

Flutter ListView Focus Item

In Flutter, a ListView is a commonly used widget for displaying a vertically-scrollable list of items. By default, ListView does not provide any built-in functionality to focus on a specific item. However, you can achieve the desired behavior using various techniques. Let’s explore some of the approaches and provide examples.

1. Manually controlling focus with focus nodes

You can manually control the focus behavior of ListView items by using FocusNode and FocusScope widgets. Here are the steps:

  1. Create a list of FocusNode instances, each representing an item in the ListView.
  2. Wrap your ListView with a FocusScope widget to provide a focus scope for the list.
  3. Use a combination of FocusTraversalPolicy and onKey event handling to move focus up/down based on key inputs.

// Example code to demonstrate manually controlling focus with focus nodes
class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State {
  List<FocusNode> _focusNodes;
  
  @override
  void initState() {
    super.initState();
    _focusNodes = List.generate(10, (index) => FocusNode());
  }
  
  @override
  Widget build(BuildContext context) {
    return FocusScope(
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
            focusNode: _focusNodes[index],
            onTap: () {
              // Handle item tap
            },
          );
        },
      ),
    );
  }
}

2. Using the focusable package

If you prefer a simpler solution, you can use the focusable package, which provides an easy way to add focus to ListView items. Here’s an example:

  1. Add the focusable package to your project dependencies.
  2. Wrap the ListView items with FocusableActionDetector widget and provide a unique focus identifier for each item.
  3. Handle the onFocusChanged event to perform actions when an item gains or loses focus.

// Example code to demonstrate using the focusable package
import 'package:focusable/focusable.dart';

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State {
  int _focusedIndex = -1;
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return FocusableActionDetector(
          focusNode: FocusableTreeNode(listKey: 'item_$index'),
          onShowFocusHighlight: (node) {
            setState(() {
              _focusedIndex = index;
            });
          },
          onHideFocusHighlight: (node) {
            setState(() {
              _focusedIndex = -1;
            });
          },
          child: ListTile(
            title: Text('Item $index'),
            tileColor: _focusedIndex == index ? Colors.blue : null,
            onTap: () {
              // Handle item tap
            },
          ),
        );
      },
    );
  }
}

With these techniques, you can easily achieve the focus behavior for ListView items in your Flutter application.

Leave a comment