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.
diplomatic-quarter/lib/pages/learning/course_detailed.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();
}
},
),
);
}
}