我正在开发一个应用程序，允许用户按下视频标题并在宽高比视频部分小部件中播放它，问题是我想根据用户选择动态更改视频 URL，困难的部分是用户可以'没有令牌就不能访问视频，所以我实现了这个函数，它持有一个 URL 段来传递视频 id 以获得视频链接......
Future<VideoLinkModule> getVideo(int videoId) async {
try {
final url = 'https://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;
}
之后，当视频 id 被传递时，我可以访问视频链接，所以我使用 future builder 来读取数据。
if (snapshot.hasData) {
AllVideosModule courses = snapshot.data;
for (int i = 0; i < courses.container.videos.length; ++i)
return Column(
children: [
Container(
height: useTabletLayout
? displayHeight(context) * 0.6
: displayHeight(context) * 0.5,
width: double.infinity,
child: FutureBuilder(
future: Provider.of<Auth>(context, listen: false)
.getVideo(courses.container.videos[i].videoId),
builder: (context, snapshot) {
if (snapshot.hasData) {
VideoLinkModule videoURL = snapshot.data;
return Column(
children: [
Directionality(
textDirection: TextDirection.ltr,
child: Expanded(
child: VideoItems(
videoPlayerController:
VideoPlayerController.network(videoURL.link),
autoplay: true,
),
),
),
Container(
child: ListView.builder(
itemCount:
courses.container.videos.length,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return AnimationConfiguration
.staggeredList(
position: index,
duration:
const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: InkWell(
onTap: () {
/// maybe here i can do smth
},
child: Padding(
padding: EdgeInsets.symmetric(
vertical: displayWidth(
context) *
0.1,
horizontal:
displayHeight(
context) *
0.02),
child: Container(
padding: EdgeInsets
.symmetric(
horizontal:
displayWidth(
context) *
0.02),
width: useTabletLayout
? displayWidth(
context) *
0.6
: displayWidth(
context) *
0.6,
decoration:
BoxDecoration(
color:
AppColors().white,
borderRadius:
BorderRadius.all(
Radius.circular(30),
),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.start,
children: [
CircleAvatar(
backgroundImage:
AssetImage(
'assets/images/plsdd.png'),
),
SizedBox(
width: displayWidth(
context) *
0.02,
),
RegularMediumFont(
text: courses
.container
.videos[index]
.video
.title,
),
],
)),
))),
);
},
),
height: useTabletLayout
? displayHeight(context) * 0.2
: displayHeight(context) * 0.2,
),
],
);
} else if (!snapshot.hasData) {
return Center(
child: Center(
child: CircularProgressIndicator(),
));
}
return Center(
child: CircularProgressIndicator(),
);
},
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: displayHeight(context) * 0.01),
height: useTabletLayout
? displayHeight(context) * 0.50
: displayHeight(context) * 0.45,
decoration: BoxDecoration(
color: AppColors().white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
)),
child: FutureBuilder<AllVideosModule>(
future: Provider.of<CoursesProvider>(context,
listen: false)
.getAllCourses(widget.item.id.toString()),
builder: (context, snapshot) {
if (snapshot.hasData) {
return GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing:
displayWidth(context) * 0.015,
mainAxisExtent: context.isTablett
? displayHeight(context) * 0.2
: context.isPhonee
? displayHeight(context) * 0.3
: context.isSmallPhonee
? displayHeight(context) *
0.25
: null,
crossAxisCount:
context.isTablett ? 3 : 2),
itemCount: courses.container.courses.length,
itemBuilder: (context, index) {
return AnimationConfiguration.staggeredGrid(
position: index,
columnCount: 2,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: InkWell(
onTap: () {
Navigator.push(
context,
CustomRoute(
builder: (context) =>
EnterCouponScreen(
courseTicket: courses
.container
.courses[index],
)));
},
child: FittedBox(
child: Container(
height: useTabletLayout
? displayHeight(context) * 0.34
: displayHeight(context) * 0.33,
margin: EdgeInsets.symmetric(
horizontal:
displayWidth(context) * 0.04,
),
width: useTabletLayout
? displayWidth(context) * 0.6
: displayWidth(context) * 0.5,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(15),
color:
AppColors().inputBackGround,
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: AppColors().white,
borderRadius:
BorderRadius.only(
bottomLeft:
Radius.circular(15),
topLeft:
Radius.circular(15),
),
),
child: Container(
margin: useTabletLayout
? EdgeInsets.all(15)
: EdgeInsets.all(13),
child: SmallBoldFont(
color: AppColors().orange,
text: courses
.container
.courses[
index]
.value ==
null
? 'دورة مجاني'
: courses
.container
.courses[
index]
.value
.value
.toString() +
'دينار أردني',
),
),
margin: EdgeInsets.only(
top: displayHeight(
context) *
0.015),
),
SizedBox(
height:
displayHeight(context) *
0.02,
),
Padding(
padding: EdgeInsets.only(
right: displayHeight(
context) *
0.015),
child: SmallRegularFont(
text: courses.container
.courses[index].title,
),
),
SizedBox(
height:
displayHeight(context) *
0.02,
),
Padding(
padding: EdgeInsets.only(
right: displayHeight(
context) *
0.02),
child: VerySmallRegularFont(
text: courses
.container
.courses[index]
.value ==
null
? 'تصفح الدورة مجانا'
: 'اشتري الدورة لتصفحها',
),
),
Padding(
padding: EdgeInsets.only(
right: displayHeight(
context) *
0.02),
child: Row(
children: [
RegularMediumFont(
text: courses
.container
.courses[
index]
.value ==
null
? 'اشترك الآن'
: 'اشتري الآن',
),
Container(
child: IconButton(
icon: Icon(
Icons
.arrow_forward_sharp,
color: AppColors()
.white,
),
onPressed: () {}),
width: displayWidth(
context) *
0.10,
height: displayHeight(
context) *
0.10,
decoration:
BoxDecoration(
color: AppColors()
.orange,
shape:
BoxShape.circle,
),
)
],
),
),
],
),
),
),
),
),
);
},
);
} else if (snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else if (!snapshot.hasData) {
return Center(
child: Text('NO DATA'),
);
}
return Container();
},
),
),
],
);
}
预期的结果应该是这样 在此处输入图像描述
