如何集成D-Pad焦点导航？

Question

我目前正在尝试在我的Android电视上制作一个Netflix风格的用户界面。在过去的几天里，我一直在为集成焦点导航而苦苦挣扎，我想我应该在这里提问，因为这里似乎没有任何真正深入的教程。

现在，我希望能够使用d-pad控件导航我的ListView生成器，并向小部件添加一个特殊的状态，以表示它当前处于选中状态(放大或带有边框)。

下面是我当前的代码：

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  HomeState createState() => new HomeState();
}

class HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 8.0, right: 8.0),
      child: FutureBuilder(
          // an asset :bundle is just the resources used by a given application
          future: DefaultAssetBundle.of(context)
              .loadString('assets/json/featured.json'),
          builder: (context, snapshot) {
            // Loading indicator
            if (!snapshot.hasData) {
              return CircularProgressIndicator();
            }

            if (snapshot.hasError) {
              return Text(snapshot.error); // or whatever
            }

            var mediaData = json.decode(snapshot.data.toString());
            List<Session> mediaDataSession =
                (mediaData as List<dynamic>).cast<Session>();

            // Pass our array data into the Session class' fromJson method and allow it to be iterable
            var decodedData =
                mediaData.map((data) => Session.fromJson(data)).toList();

            BoxDecoration myBoxDecoration() {
              return BoxDecoration(
                border: Border.all(),
              );
            }

            return Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 30.0),
                  child: Align(
                    alignment: Alignment.bottomLeft,
                    child: Text('Featured',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontFamily: 'HelveticaNeue',
                            fontSize: 24.0)),
                  ),
                ),
                Expanded(
                  // Focus was here before
                      child: ListView.builder(
                        itemCount: mediaData.length,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return Align(
                            alignment: Alignment.topLeft,
                            child: Container(
                              margin:
                                  EdgeInsets.only(right: 8.0, top: 4.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment
                                    .start, // Workaround for aligning text
                                children: [
                                      Container(
                                        // Find a way to render based on focus being true
                                        decoration: myBoxDecoration(),
                                        child: InkWell(
//                                          onTap: () => {},
                                          borderRadius: BorderRadius.circular(4.0),
                                          focusColor: Colors.black,
                                          child: SizedBox(
                                            height: 150.0,
                                            child: ClipRRect(
                                                child: Image.network(
                                                    mediaData[index]['image'])),
                                          ),
                                        ),
                                      ),

                                  Padding(
                                    padding: const EdgeInsets.only(top: 6.0),
                                    child: Text(mediaData[index]['name'],
                                        textAlign: TextAlign.left,
                                        style: TextStyle(
                                            fontSize: 17.0,
                                            fontFamily: "HelveticaNeue",
                                            fontWeight: FontWeight.normal)),
                                  )
                                ],
                              ),
                            ),
                          );
                        },
                      ),
                ),
              ],
            );
          }),
    );
  }
}

作为参考，我想在这里获得类似以下视频的行为：https://www.youtube.com/watch?v=l37VYXhRhPQ

任何帮助都将不胜感激！

Answer 1

以下是视频中应用程序的源代码：https://gitlab.com/ad-on-is/chillyflix/