how to focus on listview items in android tv app on flutter

user_13384295 0
Viewed 584

I want to build an android tv app in flutter almost everything is done but one problem is I'm not able to focus(like some pop-up effect or border change anything that tells the user that you're on this item right now) item we are iterating in Listview.image of what I want in app

but I'm not able to give this focus. I tried with FocusScope -> Listview - > focus node but it is not giving exact behaviour in first and last index, and also it's not working in the homepage where multiple listviews are there.

android-tv flutter listview focus android
2 Answers

after trying many ways I found an easy and effective way to doing this using InkWell.

widget tree will look like => scaffold -> somewidgets -> ListView -> Inkwell -> Carosouls

we have to wrap widget in InkWell and use onTap , focusColor , onFocusChange in InkWell because InkWell it self having focus.

 onFocusChange: (value) {
                        print(i);
                        setState(() {
                          hoverIndex = i;
                          widget.selectedIndex = i;
                        });
                      },
                      focusColor: Colors.transparent,

this on focus change function will be inside InkWell so it will call everytime user ilterate in ListView so according to that i (index) we can assign hoverIndex and according to hoverIndex we can change styling of ilterating element.

user_133842950

You should implement a stateful widget for the ListView element that includes a FocusNode.

You then add a FocusNode listener, which will be called every time the focus state changes, and set all the visual parameters you want to change in the callback.

        class _FocusableListViewItemState extends State<FocusableListViewItem>
        { 
    
          FocusNode _node;
        Color _focusBorderColor;

         @override
          void initState() {
            _focusBorderColor = Colors.transparent;
            _node.addListener(_onFocusChange);
        }

void _onFocusChange() {
    if (_node.hasFocus) {

      setState(() {
        _focusBorderColor = Colors.white;
      });
      
    } else {

      setState(() {
        _focusBorderColor = Colors.transparent;

      });
    }
  }


    
    }
user_54190330
Related