flutter - Flutter 根据视频 id 动态更改视频源

Question

我有一个包含来自嵌套未来构建器的页面，并且我有一个提供程序类，其中包含两种方法，第一个用于通过传递视频 ID 获取视频链接，第二个用于获取课程列表的内容，想法基本上是我可以从第二个 API 调用中获取视频 ID，并且我希望用户能够在每次按下视频标题时动态更改视频 URL

第一种方法

 Future<VideoLinkModule> getVideo(String videoId) async {
try {
  final url = 'xxxxxxx/$videoId';
  final response = await http.get(url, headers: {
    "Accept": "application/json",
    'Authorization': 'Bearer $_token',
  });
  if (response.statusCode == 200) {
    return VideoLinkModule.fromJson(jsonDecode(response.body));
  }
} catch (error) {
  print(error);
  throw error;
}

第二种方法

 Future<UserRegestiredCourses> getRegisteredCourseData(String courseID) async {
try {
  final url ='xxxxxxxx/$courseID';
  final response = await http.get(url,headers: {
    "Accept": "application/json",
    'Authorization': 'Bearer $_token',
  });
  if(response.statusCode == 200){
    return  UserRegestiredCourses.fromJson(jsonDecode(response.body));

  }
  print(response.body.toString());
} catch (error) {
  print(error);
  throw error;
}

页面内容

var shortestSide = MediaQuery.of(context).size.shortestSide;
var useTabletLayout = shortestSide > 600;
return SafeArea(

    top: true,
    child: Scaffold(

      body: FutureBuilder<UserRegestiredCourses>(
        future: Provider.of<Auth>(context, listen: false)
            .getRegisteredCourseData(widget.course.courseId.toString()),
        builder: (context, snapshot) {

          if (snapshot.hasData) {
            UserRegestiredCourses courseData = snapshot.data;
            String textHolder = courseData.course.title;

            for (int i = 0;
                i <
                    courseData.course.availableSections[i].availableClasses
                        .length;
                i++) {
              return Column(
                children: [
                  Container(
                    height: displayHeight(context) * 0.35,
                    decoration: BoxDecoration(
                        color: AppColors().white,
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(30),
                          bottomLeft: Radius.circular(30),
                        )),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        FutureBuilder<VideoLinkModule>(
                          future: _getVideo(courseData
                              .course
                              .availableSections[i]
                              .availableClasses[i]
                              .videoId),
                          // future: Provider.of<Auth>(context, listen: false)
                          //     .getVideo(courseData
                          //         .course
                          //         .availableSections[i]
                          //         .availableClasses[i]
                          //         .videoId),
                          /// in my opinion, we need to change the value of the future each time we press in list tile item
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              VideoLinkModule videoURL = snapshot.data;
                              return Directionality(
                                textDirection: TextDirection.ltr,
                                child: Expanded(
                                  child: VideoItems(
                                    autoplay: true,
                                    videoUrl: videoURL.link,
                                  ),
                                ),
                              );
                            } else if (snapshot.connectionState ==
                                ConnectionState.waiting) {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                            return Center(
                              child: Text('Loading...'),
                            );
                          },
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal: displayHeight(context) * 0.03,
                              vertical: displayHeight(context) * 0.01),
                          child: RegularMediumFont(
                            text: '$textHolder',
                          ),
                        ),
                      ],
                    ),
                  ),
                  PreferredSize(
                    preferredSize: null,
                    child: TabBar(
                      labelPadding: useTabletLayout
                          ? EdgeInsets.symmetric(
                              vertical: displayHeight(context) * 0.02,
                            )
                          : EdgeInsets.symmetric(
                              vertical: displayHeight(context) * 0.0),
                      indicatorPadding: EdgeInsets.symmetric(
                          vertical: 0.0, horizontal: 20.0),
                      indicatorColor: AppColors().orange,
                      tabs: list,
                      controller: _controller,
                      onTap: (index) {},
                    ),
                  ),
                  Expanded(
                    child: TabBarView(
                      controller: _controller,
                      children: [
                        DawraHisas(
                          widget: SingleChildScrollView(
                            physics: ScrollPhysics(),
                            child: ListView.builder(
                              physics: NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              itemCount: courseData
                                  .course.availableSections.length,
                              itemBuilder: (context, index) {
                                return CourseCard(
                                  text: RegularMediumFont(
                                    text: courseData.course
                                        .availableSections[index].name,
                                  ),
                                  subText: SmallRegularFont(
                                    color: AppColors().greyText,
                                    text: courseData
                                            .course
                                            .availableSections[index]
                                            .availableClasses
                                            .map((e) => e.order)
                                            .length
                                            .toString() +
                                        ' حصة ',
                                  ),
                                  widget: ListView(
                                    shrinkWrap: true,
                                    children: courseData
                                        .course
                                        .availableSections[index]
                                        .availableClasses
                                        .map((e) => InkWell(
                                              onTap: () {},
                                              child: ListTile(
                                                dense: true,
                                                minVerticalPadding: 1.0,
                                                contentPadding:
                                                    EdgeInsets.symmetric(
                                                        vertical: 1),
                                                leading: ClipOval(
                                                  child: Image.asset(
                                                    'assets/images/icons8-play-50.png',
                                                    fit: BoxFit.cover,
                                                    width: useTabletLayout
                                                        ? displayWidth(
                                                                context) *
                                                            0.05
                                                        : displayWidth(
                                                                context) *
                                                            0.06,
                                                  ),
                                                ),
                                                title: SmallRegularFont(
                                                  text: e.title,
                                                ),
                                                subtitle: Row(
                                                  children: [
                                                    Icon(
                                                      Icons.timer,
                                                      color: AppColors()
                                                          .greyText,
                                                      size: displayHeight(
                                                              context) *
                                                          0.02,
                                                    ),
                                                    SizedBox(
                                                      width: displayWidth(
                                                              context) *
                                                          0.001,
                                                    ),
                                                    VerySmallRegularFont(
                                                      colors: AppColors()
                                                          .greyText,
                                                      text: Duration(
                                                                  seconds: e
                                                                      .duration)
                                                              .inMinutes
                                                              .toString() +
                                                          ' دقيقه ',
                                                    )
                                                  ],
                                                ),
                                              ),
                                            ))
                                        .toList(),
                                  ),
                                );
                              },
                            ),
                          ),
                        ),
                        DawraFiles(),
                      ],
                    ),
                  ),
                ],
              );
            }
          } else if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
                child: CircularProgressIndicator(
              valueColor:
                  new AlwaysStoppedAnimation<Color>(AppColors().orange),
            ));
          } else if (snapshot.hasError) {
            return Center(
              child: Text('NO DATA '),
            );
          }
          return CircularProgressIndicator(
            valueColor:
                new AlwaysStoppedAnimation<Color>(AppColors().orange),
          );
        },
      ),
    ));}

预期的结果应该是这样，顶部的视频播放器和底部的列表，每次用户按下列表磁贴时，视频将根据其视频 ID 更改在 此处输入图像描述

标签： flutterdartflutter-providerflutter-futurebuilderflutter-video-player