Flutter：显示来自 API 提供商的 YouTube 视频

Question

我将 API 与提供程序一起用于从数据库中获取数据，并且我有一个 YouTube 视频链接列表，我想使用这些链接来呈现视频。但是由于错误，我无法将链接列表放入_controllers：

无法在初始化程序中访问实例成员“serviceProvider”。
尝试用不同的表达式替换对实例成员的引用。

这是我的代码：

static List<YoutubePlayerController> _controllers =
   ['uEZAT3YJvDw', 'zMPfxQunIRw', 'uEZAT3YJvDw'] //I want to replace this line with the api list of links
          .map<YoutubePlayerController>(
            (videoId) => YoutubePlayerController(
              initialVideoId: videoId,
              flags: const YoutubePlayerFlags(
                autoPlay: false,
              ),
            ),
          )
          .toList();

ListView.separated(
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                        itemBuilder: (context, index) {
                          return Card(
                            child: YoutubePlayer(
                              key: ObjectKey(_controllers[index]),
                              controller: _controllers[index],
                              actionsPadding: const EdgeInsets.only(left: 16.0),
                              bottomActions: [
                                CurrentPosition(),
                                ProgressBar(isExpanded: true),
                                const SizedBox(width: 10.0),
                                RemainingDuration(),
                                FullScreenButton(),
                              ],
                            ),
                          );
                        },
                        itemCount: _controllers.length,
                      )

class HomeDatum {
  HomeDatum({
    this.attachment,
  });
  var attachment; // this json carry the link

  factory HomeDatum.fromJson(Map<String, dynamic> json) => HomeDatum(
        attachment: json["attachment"],
      );}

Future<dynamic> getVideosList() async {

    http.Response response = await http
        .get(url, headers: headers);

    Map<dynamic, dynamic> responseData = json.decode(response.body);
    var results;
    if (responseData['status'] == 1) {
      _homeDatum = [];
      responseData['data'].forEach((element) {
        _homeDatum.add(HomeDatum.fromJson(element));
      });
      results = true;
    } 
    _isLoading = false;
    notifyListeners();
    return results;
  }

Answer 1

如果您正在调用 API，并且希望从 API 获取数据并在同一页面上显示数据。首先你需要初始化

  final List _controllers = [];   // This for your video id's
  static List<YoutubePlayerController> _controllersYoutube; // this is your YouTube Controller data
  var videoData; // This for store API response

然后您需要创建 API 调用方法并将您的 id 设置为_controllersYoutube

  Future getVideos() async {
    var url = "$baseUrl/api/videos";  // Your API
    var response = await http.get(url);
    videoData = json.decode(response.body);
    if (this.mounted) {
      setState(() {
        for (var myAllData in videoData) {
          _controllers.add(myAllData['youtube_video_id']);
        }
        _controllersYoutube = _controllers.map<YoutubePlayerController>((videoId) {

         `// eodZS9Wkab0  yc9JIvamDm4  9Ty_qqvhiI4  Te862nM7mJ0 I'm getting this id's from API`

          return YoutubePlayerController(
            initialVideoId: videoId,
            flags: const YoutubePlayerFlags(
              autoPlay: false,
            ),
          );
        }).toList();
        // loading = false;
      });
    }
  }

然后简单地创建一个 UI 来显示带有 YouTube 视频的列表视图，如下所示

     body: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            height: 150,
            child: YoutubePlayer(
              key: ObjectKey(_controllersYoutube[index]),
              controller: _controllersYoutube[index],
              actionsPadding: const EdgeInsets.only(left: 16.0),
              bottomActions: [
                CurrentPosition(),
                ProgressBar(isExpanded: true),
                const SizedBox(width: 10.0),
                RemainingDuration(),
                FullScreenButton(),
              ],
            ),
          );
        },
        itemCount: _controllers.length,
      )

我希望这个答案对你有用。