Flutter Android Tv Focus Issue-First index not focusing using arrow it start from second index but when use tab in pc it focus on first element

17 Views Asked by At

In Tv app i am trying to integrate suggestion list.I called landscape function and i open suggestion list using dpad First index not focusing using arrow it start from second index but when use tab in pc it focus on first element.

  @override
  Widget build(BuildContext context) {
    if (_showSlider) {
      //FocusScope.of(context).requestFocus(lastItemFocusNode);
    }
    return WillPopScope(
      onWillPop: onBackPressed,
      child: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Stack(
            children: [
              Center(
                child: _buildPage(),
              ),
              if (_showSlider)
                RawKeyboardListener(
                  focusNode: FocusNode(),
                  onKey: (RawKeyEvent event) {
                    print('object');
                    _resetSliderTimer();
                  },
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width,
                        child:landscape(videoDetailsProvider.sectionDetailModel.getRelatedVideo),
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

Widget landscape(List<GetRelatedVideo>? relatedDataList) {
    if (relatedDataList == null || relatedDataList.isEmpty) {
      // Return a placeholder widget when the relatedDataList is null or empty
      return Placeholder();
    }

    return Container(
      width: MediaQuery.of(context).size.width,
      height: Dimens.heightLand,
      margin: const EdgeInsets.only(top: 12),
      child: ListView.separated(
        itemCount: relatedDataList.length,
        shrinkWrap: true,
        padding: const EdgeInsets.fromLTRB(12, 0, 0, 0),
        scrollDirection: Axis.horizontal,
        separatorBuilder: (context, index) => const SizedBox(width: 0),
        itemBuilder: (BuildContext context, int index) {
          final focusNode = index == 0 ? lastItemFocusNode : null; 
          FocusScope.of(context).requestFocus(focusNode);
          return Focus(
            focusNode: focusNode,
            child: FocusBase(
              onFocus: (isFocused) {
              },
              focusColor: white,
              onPressed: () async {
                log("Clicked on index ==> $index");
                openDetailPage(
                  index,
                  relatedDataList[index].id ?? 0,
                  relatedDataList[index].upcomingType ?? 0,
                  relatedDataList[index].videoType ?? 0,
                  relatedDataList[index].typeId ?? 0,
                );
              },
              child: Container(
                width: Dimens.widthLand,
                height: Dimens.heightLand,
                alignment: Alignment.center,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(4),
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: MyNetworkImage(
                    imageUrl: relatedDataList[index].landscape.toString() ?? "",
                    fit: BoxFit.cover,
                    imgHeight: MediaQuery.of(context).size.height,
                    imgWidth: MediaQuery.of(context).size.width,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }

I tried every possible thing to solve this used chatgpt to solve this but didn't work.

enter image description here

0

There are 0 best solutions below