如何让这个函数等待 JSON 数据准备好

Question

我正在尝试让 initialVideoId 等待 keyy 函数等待，但我不知道如何去吧。

我正在使用 Flutter，我的工作是从 TMDB 获取视频密钥，但不知道如何使 initialVideoId 等待 JSON 数据在访问之前准备好。

  getVideoUrl() async {
    http.Response response = await http.get(
        'https://api.themoviedb.org/3/movie/${widget.movieId}/videos?api_key=$kApiKey');

    // print(json.decode(response.body));

    String data = response.body;
    // data.length;

    var keyy = jsonDecode(data)['results'][0]['key'];
    // results[0].key
    print(keyy);
  
  }

  // String link = 'e9waCtSVoZ0';

  YoutubePlayerController _controller;
  bool isPlaerReady = false;

  @override
  void initState() {
    super.initState();

    print(widget.movieId);
    getVideoUrl();
    // _controller = YoutubePlayerController(initialVideoId: keyy);
    this._controller = YoutubePlayerController(
      initialVideoId: keyy,
      flags: YoutubePlayerFlags(
        mute: false,
        autoPlay: true,
        disableDragSeek: true,
        loop: false,
        isLive: false,
        // forceHideAnnotation: true,
        forceHD: false,
        enableCaption: true,
      ),
    )..addListener(_videoPlayerListner);
  }

  void _videoPlayerListner() {
    print(_controller.value.playerState.toString());
  }

void isPlayReady(){

}
  @override
  void deactivate() {
    _controller.pause();
    super.deactivate();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


@override
  Widget build(BuildContext context) {
    // return Text(getVideoUrl());
    // 
      return YoutubePlayer(
        controller: _controller,
        showVideoProgressIndicator: true,
        progressIndicatorColor: Colors.blueAccent,
        topActions: <Widget>[
          SizedBox(width: 8.0),
          Expanded(
            child: Text(
              _controller.metadata.title,
              style: TextStyle(
                color: Colors.white,
                fontSize: 18.0,
              ),
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ),
        ],
        onReady: () {
          isPlaerReady;
        },
        onEnded: (data) {},
      );
  }
}

我按要求将我的构建方法添加到问题中

Answer 1

您可以按照建议使用 FutureBuilder 来执行此操作。

例如，您可以执行一个函数来获取视频密钥，如下所示：

Future getVideoKey() async {
  var result = await http.get('https://getkeyfromTMDB');
  return result;    
}

然后，当您获得结果时，调用您的小部件的构建方法。这是一个基于您的代码的示例，它可能无法开箱即用：

@override
  Widget build(BuildContext context) {
    future: getVideoKey(), //this line is important. this tells your app to wait for the response before building the ui.
    return FutureBuilder(
            future: getVideoKey(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return YoutubePlayer(
                  controller: _controller,
                  showVideoProgressIndicator: true,
                  progressIndicatorColor: Colors.blueAccent,
                  topActions: <Widget>[
                    SizedBox(width: 8.0),
                    Expanded(
                      child: Text(
                        _controller.metadata.title,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                        ),
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ),
                  ],
                  onReady: () {
                    isPlaerReady;
                  },
                  onEnded: (data) {},
                );
              } else {
                return Center(child: CircularProgressIndicator());
              }
            });
  }