Flutter Android TV app Horizontal ListView Click Item Issue

user_2505890 0
Viewed 607

I am working on a flutter app to be used on Android TV. App has a UI like Netflix(Like multiple horizontal ListViews and Main Vertical ListView) Have added below code to make it work with TV remote

Shortcuts(
      shortcuts: <LogicalKeySet, Intent>{
        LogicalKeySet(LogicalKeyboardKey.select): ActivateIntent(),
      },

I am able to Scroll vertically and horizontally inside each ListView. The issue is I am not able to focus the particular listview item. Objective is if user clicks focusable item with TV remote , it should open new Page.

Using below code for UI of each line item.

Focus(
      autofocus: true,
      child: GestureDetector(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => VideoScreen(id: video.id),
          ),
        ),
        child:
           Container(
            margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
            padding: EdgeInsets.all(10.0),
            height: 140.0,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.black45,
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0, 1),
                  blurRadius: 6.0,
                ),
              ],
            ),
            child: Column(
              children: [
                Row(
                  children: <Widget>[
                    Image(
                      width: 150.0,
                      image: NetworkImage(video.thumbnailUrl),
                    )
                  ],
                ),
                Text(
                  video.title,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                  ),
                ),
                RaisedButton(onPressed: (){


                })
              ],
            ),
        ),
      ),
    )

I also referred below link but somehow its not working: flutter android tv listview focused item change background and text

android-tv dart flutter android
1 Answers

Instead of Shortcuts may be you can RawKeyboardListener, I have used below code:

const int KEY_UP = 19;
const int KEY_DOWN = 20;
const int KEY_LEFT = 21;
const int KEY_RIGHT = 22;
const int KEY_CENTER = 23;
const int KEY_CENTER_KEYBOARD = 66;

class DpadWidget extends StatefulWidget {
  final Function onClick;
  final Function(bool isFocused) onFocus;
  final Widget child;
  final String id;

  const DpadWidget({Key key, this.onClick, this.child, this.id, this.onFocus})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return DpadWidgetState();
  }
}

class DpadWidgetState extends State<DpadWidget> {
  List<FocusNode> focusNodes = List();
  FocusNode node;
  bool isFocused = false;

  @override
  void initState() {
    super.initState();
    node = FocusNode();
  }

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      child: widget.child,
      focusNode: node,
      onKey: (RawKeyEvent event) {
        isFocused = !isFocused;

        if (widget.onFocus != null) widget.onFocus(isFocused);

        if (event is RawKeyDownEvent && event.data is RawKeyEventDataAndroid) {
          RawKeyDownEvent rawKeyDownEvent = event;
          RawKeyEventDataAndroid rawKeyEventDataAndroid = rawKeyDownEvent.data;
          print(rawKeyEventDataAndroid.keyCode);
          switch (rawKeyEventDataAndroid.keyCode) {
            case KEY_CENTER:
              widget.onClick();
              break;
            case KEY_CENTER_KEYBOARD:
              widget.onClick();
              break;
            case KEY_UP:
              break;
            case KEY_DOWN:
              break;
            default:
              break;
          }
        }
      },
    );
  }
}

Now if you wanted to have a fast forward or back just use the RawKeyboardListener with specific case to handle it.

You can also use your D-PAD keys to perform such action.

user_59967460
Related