how to convert asynchronus function to synchronous

Question

i am trying to make a youtube video carousel such that when a video completes it should move to next slide and play the next video automatically. and if a user manually swipes slide then also previous one should stop and the next one should play automatically.

onPageChanged: (index, reason) {
                  Future.delayed(const Duration(seconds: 5), () async {
                    PlayerState currentControllerState =
                        await _controllers[_currentIndex].playerState;
                    if (currentControllerState == PlayerState.playing) {
                      await _controllers[_currentIndex].stopVideo();
                    }
                    String currentVideoId =
                        YoutubePlayerController.convertUrlToId(
                            bannerList[_currentIndex].mediaUrl)!;
                    _controllers[_currentIndex] =
                        YoutubePlayerController.fromVideoId(
                            videoId: currentVideoId);
                    _controllers[_currentIndex].listen((event) async {
                      if (event.playerState == PlayerState.ended) {
                        await tvAddsController.nextPage();
                      }
                    });
                    _currentIndex = index;
                    setState(() {});
                    await _controllers[index].playVideo();
                  });
                }),

i think onPageChanged function is getting finished before the asynchronus code gets executed. using future delayed solves this scenario in multiple cases but still fails in 1 or 2. plus i dont want to use future delayed. i also tried then and catch still problem exists. the main problem i am facing is that when a slide is scrolled the next video first shows error for 1 second then initializes the video but does not play it