Android 如何集成D-Pad焦点导航?

Android 如何集成D-Pad焦点导航?,android,flutter,dart,Android,Flutter,Dart,我目前正试图在我的Android电视上用Flutter制作一个Netflix风格的用户界面。在过去的几天里,我一直在努力集成焦点导航,我想在这里问一下,因为这里似乎没有任何深入的教程 现在,我希望能够使用d-pad控件导航我的ListView构建器,并向小部件添加一个特殊状态,以表示它当前已被选中或带有边框 以下是我当前的代码: class Home extends StatefulWidget { Home({Key key}) : super(key: key); @overrid

我目前正试图在我的Android电视上用Flutter制作一个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)),
                                  )
                                ],
                              ),
                            ),
                          );
                        },
                      ),
                ),
              ],
            );
          }),
    );
  }
}
作为参考,我想在这里看到如下视频:


任何帮助都将不胜感激

以下是视频中应用程序的源代码:

太棒了,谢谢!我还发现了这篇很棒的文章: