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

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.

CodePudding user response：

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;

      });
    }
  }


    
    }

CodePudding user response：

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.