You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
442 lines
21 KiB
Dart
442 lines
21 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
|
|
import 'package:diplomaticquarterapp/extensions/string_extensions.dart';
|
|
import 'package:diplomaticquarterapp/pages/learning/content_widget.dart';
|
|
import 'package:diplomaticquarterapp/services/course_service/course_service.dart';
|
|
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/gestures.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:video_player/video_player.dart';
|
|
|
|
class CourseDetailedPage extends StatefulWidget {
|
|
@override
|
|
State<CourseDetailedPage> createState() => _CourseDetailedPageState();
|
|
}
|
|
|
|
class _CourseDetailedPageState extends State<CourseDetailedPage> {
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
context.read<CourseServiceProvider>().getCourseById(context);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
// _timer?.cancel();
|
|
// _controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AppScaffold(
|
|
isShowAppBar: false,
|
|
isShowDecPage: false,
|
|
showNewAppBarTitle: true,
|
|
showNewAppBar: true,
|
|
appBarTitle: "Course Name",
|
|
backgroundColor: Color(0xFFF7F7F7),
|
|
onTap: () {},
|
|
body: Consumer<CourseServiceProvider>(
|
|
builder: (context, provider, child) {
|
|
if (provider.courseData != null) {
|
|
return ListView(
|
|
shrinkWrap: true,
|
|
padding: EdgeInsets.zero,
|
|
children: [
|
|
if (provider.controller != null && provider.controller!.value.isInitialized) ...[
|
|
Column(
|
|
children: [
|
|
AspectRatio(
|
|
aspectRatio: provider.controller!.value.aspectRatio,
|
|
child: VideoPlayer(provider.controller!),
|
|
).onTap(() {
|
|
setState(() {
|
|
provider.controller!.value.isPlaying ? provider.controller!.pause() : provider.controller!.play();
|
|
});
|
|
}),
|
|
VideoProgressIndicator(
|
|
provider.controller!,
|
|
padding: EdgeInsets.only(bottom: 0),
|
|
colors: VideoProgressColors(
|
|
backgroundColor: Color(0xFFD9D9D9),
|
|
bufferedColor: Colors.black12,
|
|
playedColor: Color(0xFFD02127),
|
|
),
|
|
allowScrubbing: true,
|
|
),
|
|
],
|
|
)
|
|
] else ...[
|
|
CachedNetworkImage(
|
|
width: double.infinity,
|
|
height: MediaQuery.of(context).size.height * .265,
|
|
imageUrl: provider.courseData!.nabedJourneyByIdResponseResult!.consultation!.defaultPocData!.image!.thumbUrl!,
|
|
imageBuilder: (context, imageProvider) => Container(
|
|
decoration: BoxDecoration(
|
|
image: DecorationImage(
|
|
image: imageProvider,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
child: Center(
|
|
child: Icon(
|
|
Icons.play_circle,
|
|
size: 35,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
placeholder: (context, url) => Center(child: CircularProgressIndicator()),
|
|
errorWidget: (context, url, error) => Icon(Icons.error),
|
|
).onTap(() {
|
|
setState(() {
|
|
if (provider.controller != null) {
|
|
provider.controller!.value.isPlaying ? provider.controller!.pause() : provider.controller!.play();
|
|
}
|
|
});
|
|
}),
|
|
],
|
|
|
|
if (provider.consultation != null) ...[
|
|
ListView(
|
|
shrinkWrap: true,
|
|
physics: NeverScrollableScrollPhysics(),
|
|
padding: EdgeInsets.symmetric(horizontal: 20),
|
|
children: [
|
|
SizedBox(height: 20.0),
|
|
Text(
|
|
context.read<ProjectViewModel>().isArabic ? provider.consultation!.tagValues!.titleAr! : provider.consultation!.tagValues!.title ?? "Basics of Heart",
|
|
style: TextStyle(
|
|
fontSize: 16.0,
|
|
height: 24 / 16,
|
|
color: Color(0xFF2E303A),
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
// SizedBox(height: 2.0),
|
|
// Text(
|
|
// "Heart diseases include conditions like coronary and heart failure, often caused by factors ",
|
|
// style: TextStyle(fontSize: 10.0, height: 15 / 10, color: Color(0xFF575757)),
|
|
// ),
|
|
// SizedBox(height: 6.0),
|
|
Text(
|
|
provider.consultation!.stats!.videosCount.toString() + " Videos",
|
|
style: TextStyle(
|
|
fontSize: 10.0,
|
|
height: 15 / 10,
|
|
color: Color(0xFF2E303A),
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
|
|
// Row(
|
|
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
// children: [
|
|
// Row(
|
|
// children: [
|
|
// Row(
|
|
// children: List.generate(5, (starIndex) {
|
|
// return Icon(
|
|
// Icons.star,
|
|
// color: Color(0xFFD1272D),
|
|
// size: 15.0,
|
|
// );
|
|
// }),
|
|
// ),
|
|
// SizedBox(width: 8.0),
|
|
// Text(
|
|
// '540 reviews',
|
|
// style: TextStyle(
|
|
// fontSize: 10.0,
|
|
// height: 15 / 10,
|
|
// color: Color(0xFF2B353E),
|
|
// fontWeight: FontWeight.w700,
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ],
|
|
// ),
|
|
],
|
|
),
|
|
],
|
|
SizedBox(height: 30.0),
|
|
if (provider.courseTopics != null) ...[
|
|
ListView(
|
|
shrinkWrap: true,
|
|
physics: NeverScrollableScrollPhysics(),
|
|
padding: EdgeInsets.symmetric(horizontal: 20),
|
|
children: provider.courseTopics!.map((topic) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Topic title
|
|
Text(
|
|
(topic.title.toString() + "(${topic.contentsCount.toString()})") ?? "Topic",
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.bold,
|
|
color: Color(0xFF2B353E),
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
...topic.contents!.asMap().entries.map((entry) {
|
|
final index = entry.key + 1;
|
|
final content = entry.value;
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(index.toString()),
|
|
SizedBox(
|
|
width: 9,
|
|
),
|
|
Expanded(
|
|
flex: 10,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
content.title ?? "Course overview",
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF2B353E),
|
|
),
|
|
),
|
|
Text(
|
|
"Video - ${provider.getDurationOfVideo(content.video!.flavor!.duration!)}",
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w500,
|
|
color: Color(0xFF575757),
|
|
),
|
|
),
|
|
ContentWidget(
|
|
body: content.body!,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
flex: 4,
|
|
child: Column(
|
|
children: [
|
|
SizedBox(
|
|
height: 10,
|
|
),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
if (content.controller != null) ...[
|
|
Container(
|
|
width: 55,
|
|
child: VideoProgressIndicator(content.controller!,
|
|
padding: EdgeInsets.only(bottom: 1),
|
|
colors: VideoProgressColors(
|
|
backgroundColor: Color(0xFFD9D9D9),
|
|
bufferedColor: Colors.black12,
|
|
playedColor: Color(0xFF359846),
|
|
),
|
|
allowScrubbing: true),
|
|
)
|
|
] else ...[
|
|
Container(
|
|
width: 55,
|
|
child: Container(
|
|
height: 4,
|
|
color: Colors.black12,
|
|
width: double.infinity,
|
|
),
|
|
)
|
|
],
|
|
SizedBox(
|
|
width: 10,
|
|
),
|
|
if (content.controller != null) ...[
|
|
Container(
|
|
width: 20,
|
|
height: 20,
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFDFDFDF),
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(30),
|
|
),
|
|
),
|
|
child: Icon(
|
|
content.controller!.value.isPlaying ? Icons.pause : Icons.play_arrow,
|
|
size: 18,
|
|
).onTap(() {
|
|
setState(() {
|
|
content.controller!.value.isPlaying ? content.controller!.pause() : content.controller!.play();
|
|
});
|
|
}),
|
|
)
|
|
] else ...[
|
|
Container(
|
|
width: 20,
|
|
height: 20,
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFDFDFDF),
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(30),
|
|
),
|
|
),
|
|
child: Icon(
|
|
Icons.play_arrow,
|
|
size: 18,
|
|
).onTap(() {
|
|
provider.playVideo(context, content: content);
|
|
}),
|
|
)
|
|
]
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}).toList(),
|
|
],
|
|
);
|
|
}).toList(),
|
|
),
|
|
]
|
|
|
|
// if(provider.courseTopics != null)...[
|
|
// ListView(
|
|
// shrinkWrap: true,
|
|
// physics: NeverScrollableScrollPhysics(),
|
|
// padding: EdgeInsets.symmetric(horizontal: 20),
|
|
// children: [
|
|
// Row(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// children: [
|
|
// Text("1"),
|
|
// SizedBox(
|
|
// width: 9,
|
|
// ),
|
|
// Expanded(
|
|
// flex: 10,
|
|
// child: Column(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// children: [
|
|
// Text(
|
|
// "Course overview",
|
|
// style: TextStyle(
|
|
// fontSize: 14,
|
|
// fontWeight: FontWeight.w600,
|
|
// color: Color(0xFF2B353E),
|
|
// ),
|
|
// ),
|
|
// Text(
|
|
// "Video - 02:56 mins",
|
|
// style: TextStyle(
|
|
// fontSize: 12,
|
|
// fontWeight: FontWeight.w500,
|
|
// color: Color(0xFF575757),
|
|
// ),
|
|
// ),
|
|
// RichText(
|
|
// text: TextSpan(
|
|
// children: [
|
|
// TextSpan(
|
|
// text: 'Heart diseases include conditions like coronary and heart failure... ',
|
|
// style: TextStyle(
|
|
// color: Color(
|
|
// 0xFFA2A2A2,
|
|
// ),
|
|
// fontSize: 13,
|
|
// fontWeight: FontWeight.w400,
|
|
// height: 13 / 10,
|
|
// ),
|
|
// ),
|
|
// TextSpan(
|
|
// text: 'See More',
|
|
// style: TextStyle(
|
|
// color: Color(0xFF2B353E),
|
|
// fontSize: 13,
|
|
// fontWeight: FontWeight.w500,
|
|
// height: 13 / 10,
|
|
// ),
|
|
// recognizer: TapGestureRecognizer()..onTap = () {},
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// Expanded(
|
|
// flex: 3,
|
|
// child: Column(
|
|
// children: [
|
|
// SizedBox(
|
|
// height: 10,
|
|
// ),
|
|
// Row(
|
|
// crossAxisAlignment: CrossAxisAlignment.center,
|
|
// mainAxisAlignment: MainAxisAlignment.center,
|
|
// children: [
|
|
// Container(
|
|
// width: 55,
|
|
// child: VideoProgressIndicator(_controller,
|
|
// padding: EdgeInsets.only(bottom: 1),
|
|
// colors: VideoProgressColors(
|
|
// backgroundColor: Color(0xFFD9D9D9),
|
|
// bufferedColor: Colors.black12,
|
|
// playedColor: Color(0xFF359846),
|
|
// ),
|
|
// allowScrubbing: true),
|
|
// ),
|
|
// SizedBox(
|
|
// width: 10,
|
|
// ),
|
|
// Container(
|
|
// width: 18,
|
|
// height: 18,
|
|
// decoration: BoxDecoration(
|
|
// color: Color(0xFFDFDFDF),
|
|
// borderRadius: BorderRadius.all(
|
|
// Radius.circular(30),
|
|
// ),
|
|
// ),
|
|
// child: Icon(
|
|
// _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
|
|
// size: 18,
|
|
// ).onTap(() {
|
|
// setState(() {
|
|
// _controller.value.isPlaying ? _controller.pause() : _controller.play();
|
|
// });
|
|
// }),
|
|
// )
|
|
// ],
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// )
|
|
// ],
|
|
// )
|
|
// ]
|
|
],
|
|
);
|
|
} else {
|
|
return SizedBox();
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|