558 lines
21 KiB
Dart
558 lines
21 KiB
Dart
import 'dart:convert';
|
|
import 'package:expandable/expandable.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/gestures.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_html/flutter_html.dart';
|
|
import 'package:initial_folder/models/detail_course_model.dart';
|
|
import 'package:initial_folder/providers/description_provider.dart';
|
|
import 'package:initial_folder/providers/theme_provider.dart';
|
|
import 'package:initial_folder/screens/detail_course/components/kursus_include_item.dart';
|
|
import 'package:initial_folder/size_config.dart';
|
|
import 'package:initial_folder/theme.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
class Desksripsi extends StatefulWidget {
|
|
const Desksripsi({
|
|
Key? key,
|
|
required this.dataDetailCourseModel,
|
|
required this.id,
|
|
this.instructor,
|
|
this.bio,
|
|
this.rating,
|
|
this.review,
|
|
this.totalStudent,
|
|
this.totalLesson,
|
|
this.video = false,
|
|
this.fotoProfile,
|
|
this.headline,
|
|
}) : super(key: key);
|
|
|
|
final DataDetailCourseModel dataDetailCourseModel;
|
|
final String id;
|
|
final String? instructor;
|
|
final String? bio;
|
|
final String? rating;
|
|
final String? review;
|
|
final String? fotoProfile;
|
|
final String? totalLesson;
|
|
final String? totalStudent;
|
|
final String? headline;
|
|
final bool video;
|
|
|
|
@override
|
|
State<Desksripsi> createState() => _DesksripsiState();
|
|
}
|
|
|
|
class _DesksripsiState extends State<Desksripsi> {
|
|
bool isExpanded = false;
|
|
bool isExpanded2 = false;
|
|
bool isExpanded3 = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final themeProvider = Provider.of<ThemeProvider>(context);
|
|
DescriptionProvider descriptionProvider =
|
|
Provider.of<DescriptionProvider>(context);
|
|
final bool hasDescription =
|
|
widget.dataDetailCourseModel.description!.isNotEmpty;
|
|
String formatDuration(String duration) {
|
|
var parts = duration.split(':');
|
|
return '${int.parse(parts[0]).toString()} jam ${int.parse(parts[1]).toString()} menit ${int.parse(parts[2]).toString()} detik';
|
|
}
|
|
|
|
List outcomes;
|
|
try {
|
|
outcomes = jsonDecode(widget.dataDetailCourseModel.outcome ?? '[]');
|
|
} catch (e) {
|
|
outcomes = [];
|
|
}
|
|
List requirement;
|
|
try {
|
|
requirement =
|
|
jsonDecode(widget.dataDetailCourseModel.requirement ?? '[]');
|
|
} catch (e) {
|
|
requirement = [];
|
|
}
|
|
|
|
Widget kemampuanDiraih(String title,
|
|
{bool showToggle = false, bool isLast = false}) {
|
|
return Container(
|
|
margin: EdgeInsets.only(bottom: 6),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
title.isNotEmpty
|
|
? Icon(
|
|
Icons.check,
|
|
size: getProportionateScreenHeight(13),
|
|
color: themeProvider.themeData == ThemeClass.darkmode
|
|
?primaryColor : primaryColorligtmode,
|
|
)
|
|
: SizedBox.shrink(),
|
|
SizedBox(width: getProportionateScreenWidth(9)),
|
|
Flexible(
|
|
child: RichText(
|
|
text: TextSpan(
|
|
text: title,
|
|
style: thirdTextStyle.copyWith(
|
|
fontSize: getProportionateScreenWidth(12),
|
|
fontWeight: light,
|
|
color: Theme.of(context).brightness == Brightness.dark
|
|
? baruTextutih
|
|
: baruTexthitam,
|
|
),
|
|
children: showToggle || isLast
|
|
? [
|
|
TextSpan(
|
|
text:
|
|
isExpanded ? ' Lihat Sedikit' : ' Lihat Semua',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(12),
|
|
color: Theme.of(context).brightness ==
|
|
Brightness.dark
|
|
? baruTextutih
|
|
: fourthColor,
|
|
),
|
|
recognizer: TapGestureRecognizer()
|
|
..onTap = () {
|
|
setState(() {
|
|
isExpanded = !isExpanded;
|
|
});
|
|
},
|
|
),
|
|
]
|
|
: [],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget persyaratan(String title,
|
|
{bool showToggle = false, bool isLast = false}) {
|
|
return Container(
|
|
margin: EdgeInsets.only(bottom: 6),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
title.isNotEmpty
|
|
? Icon(
|
|
Icons.brightness_1,
|
|
size: getProportionateScreenHeight(13),
|
|
color: themeProvider.themeData == ThemeClass.darkmode
|
|
?primaryColor : primaryColorligtmode,
|
|
)
|
|
: SizedBox.shrink(),
|
|
SizedBox(width: getProportionateScreenWidth(9)),
|
|
Flexible(
|
|
child: RichText(
|
|
text: TextSpan(
|
|
text: title,
|
|
style: thirdTextStyle.copyWith(
|
|
fontSize: getProportionateScreenWidth(12),
|
|
fontWeight: light,
|
|
color: Theme.of(context).brightness == Brightness.dark
|
|
? baruTextutih
|
|
: baruTexthitam,
|
|
),
|
|
children: showToggle || isLast
|
|
? [
|
|
TextSpan(
|
|
text:
|
|
isExpanded3 ? ' Lihat Sedikit' : ' Lihat Semua',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(12),
|
|
color: Theme.of(context).brightness ==
|
|
Brightness.dark
|
|
? baruTextutih
|
|
: fourthColor,
|
|
),
|
|
recognizer: TapGestureRecognizer()
|
|
..onTap = () {
|
|
setState(() {
|
|
isExpanded3 = !isExpanded3;
|
|
});
|
|
},
|
|
),
|
|
]
|
|
: [],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
List<Widget> kemampuanDiraihList() {
|
|
List<Widget> items = outcomes
|
|
.asMap()
|
|
.entries
|
|
.map((entry) => kemampuanDiraih(entry.value,
|
|
showToggle: !isExpanded && entry.key == 2 && outcomes.length > 3,
|
|
isLast: entry.key == outcomes.length - 1 && outcomes.length > 3))
|
|
.toList();
|
|
|
|
if (!isExpanded && outcomes.length > 3) {
|
|
items = items.take(3).toList();
|
|
items.add(kemampuanDiraih("", isLast: false, showToggle: false));
|
|
}
|
|
|
|
return items;
|
|
}
|
|
|
|
List<Widget> persyaratanList() {
|
|
List<Widget> items = requirement
|
|
.asMap()
|
|
.entries
|
|
.map((entry) => persyaratan(entry.value,
|
|
showToggle:
|
|
!isExpanded3 && entry.key == 2 && requirement.length > 3,
|
|
isLast: entry.key == requirement.length - 1 &&
|
|
requirement.length > 3))
|
|
.toList();
|
|
|
|
if (!isExpanded3 && requirement.length > 3) {
|
|
items = items.take(3).toList();
|
|
items.add(persyaratan("", isLast: false, showToggle: false));
|
|
}
|
|
|
|
return items;
|
|
}
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SizedBox(height: getProportionateScreenHeight(9)),
|
|
Container(
|
|
margin: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(16),
|
|
top: getProportionateScreenHeight(10),
|
|
),
|
|
child: Text(
|
|
'Kursus Ini Sudah Termasuk',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(14),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 10),
|
|
KursusIncludeItems(
|
|
svg: 'assets/icons/clock.svg',
|
|
text:
|
|
'${formatDuration(widget.dataDetailCourseModel.totalDuration!)} video pembelajaran'),
|
|
KursusIncludeItems(
|
|
svg: 'assets/icons/lesson.svg',
|
|
text: '${widget.dataDetailCourseModel.totalLesson} pelajaran'),
|
|
KursusIncludeItems(
|
|
svg: 'assets/icons/calendar.svg',
|
|
text: 'Akses full seumur hidup'),
|
|
Padding(
|
|
padding: EdgeInsets.only(left: getProportionateScreenWidth(1)),
|
|
child: KursusIncludeItems(
|
|
svg: 'assets/icons/phone.svg',
|
|
text: ' Akses di ponsel dan TV '),
|
|
),
|
|
SizedBox(height: 10),
|
|
],
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(5)),
|
|
Column(
|
|
children: [
|
|
ExpandableNotifier(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
margin: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(10),
|
|
right: getProportionateScreenWidth(106),
|
|
bottom: getProportionateScreenWidth(8),
|
|
),
|
|
child: Text(
|
|
'Kemampuan Yang Akan Diraih',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(14),
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
margin: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(10),
|
|
right: getProportionateScreenWidth(10),
|
|
bottom: widget.dataDetailCourseModel.outcome == "[]" ||
|
|
widget.dataDetailCourseModel.outcome!.isEmpty
|
|
? getProportionateScreenHeight(20)
|
|
: getProportionateScreenHeight(0),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: kemampuanDiraihList(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Column(
|
|
children: [
|
|
ExpandableNotifier(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
margin: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(10),
|
|
right: getProportionateScreenWidth(106),
|
|
bottom: getProportionateScreenWidth(8),
|
|
),
|
|
child: Text(
|
|
'Persyaratan',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(14),
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
margin: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(10),
|
|
right: getProportionateScreenWidth(10),
|
|
bottom: widget.dataDetailCourseModel.requirement ==
|
|
"[]" ||
|
|
widget.dataDetailCourseModel.requirement!.isEmpty
|
|
? getProportionateScreenHeight(20)
|
|
: getProportionateScreenHeight(0),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: persyaratanList(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(5)),
|
|
Column(
|
|
children: [
|
|
isExpanded
|
|
? SizedBox(height: getProportionateScreenHeight(12))
|
|
: SizedBox.shrink(),
|
|
Align(
|
|
alignment: Alignment.topLeft,
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(10)),
|
|
child: Text(
|
|
'Deskripsi',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(14),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(5)),
|
|
child: Container(
|
|
height: descriptionProvider.isExpanded
|
|
? getProportionateScreenHeight(53)
|
|
: null,
|
|
child: Html(
|
|
data: widget.dataDetailCourseModel.description ?? "",
|
|
style: {
|
|
"p": Style(
|
|
fontSize: FontSize(getProportionateScreenWidth(11)),
|
|
fontWeight: light,
|
|
margin: Margins.only(top: 0, bottom: 0),
|
|
fontFamily: 'Poppins',
|
|
color: Theme.of(context).colorScheme.onBackground),
|
|
},
|
|
),
|
|
),
|
|
),
|
|
if (hasDescription &&
|
|
widget.dataDetailCourseModel.description!.length > 120)
|
|
Container(
|
|
child: Align(
|
|
alignment: Alignment.topLeft,
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(10)),
|
|
child: RichText(
|
|
text: TextSpan(
|
|
text: descriptionProvider.isExpanded
|
|
? ' Lihat Semua'
|
|
: ' Lihat Sedikit',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(12),
|
|
color: Theme.of(context).brightness == Brightness.dark
|
|
? baruTextutih
|
|
: fourthColor,
|
|
),
|
|
recognizer: TapGestureRecognizer()
|
|
..onTap = () {
|
|
setState(() {
|
|
descriptionProvider.isExpanded =
|
|
!descriptionProvider.isExpanded;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
if (hasDescription &&
|
|
widget.dataDetailCourseModel.description!.length > 120)
|
|
SizedBox(height: getProportionateScreenHeight(10)),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(10)),
|
|
child: Row(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 20,
|
|
backgroundColor: primaryColor,
|
|
backgroundImage: widget.fotoProfile == null
|
|
? AssetImage("assets/images/Profile Image.png")
|
|
: NetworkImage(widget.fotoProfile!) as ImageProvider,
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(10)),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
widget.instructor ?? '',
|
|
style: thirdTextStyle.copyWith(
|
|
fontSize: getProportionateScreenWidth(12),
|
|
fontWeight: bold,
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
'Instructor, ',
|
|
style: thirdTextStyle.copyWith(
|
|
fontSize: getProportionateScreenWidth(10),
|
|
fontWeight: light,
|
|
),
|
|
),
|
|
Text(
|
|
'${widget.totalStudent ?? '0'} Murid, ',
|
|
style: thirdTextStyle.copyWith(
|
|
fontSize: getProportionateScreenWidth(10),
|
|
fontWeight: light,
|
|
),
|
|
),
|
|
Text(
|
|
'${widget.totalLesson ?? ''} Kursus',
|
|
style: thirdTextStyle.copyWith(
|
|
fontSize: getProportionateScreenWidth(10),
|
|
fontWeight: light,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (widget.bio == null || widget.bio!.isEmpty)
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: getProportionateScreenHeight(10),
|
|
right: getProportionateScreenHeight(10),
|
|
bottom: getProportionateScreenHeight(10),
|
|
),
|
|
child: const SizedBox(height: 5)
|
|
)
|
|
else
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(5),
|
|
right: getProportionateScreenWidth(10),
|
|
),
|
|
child: isExpanded2
|
|
? Html(
|
|
data: widget.bio,
|
|
style: {
|
|
"body": Style(
|
|
fontSize:
|
|
FontSize(getProportionateScreenWidth(11)),
|
|
fontWeight: light,
|
|
fontFamily: 'Poppins',
|
|
),
|
|
},
|
|
)
|
|
: Html(
|
|
data: widget.bio != null && widget.bio!.length > 100
|
|
? widget.bio!.substring(0, 100)
|
|
: widget.bio!,
|
|
style: {
|
|
"body": Style(
|
|
fontSize:
|
|
FontSize(getProportionateScreenWidth(11)),
|
|
fontWeight: light,
|
|
fontFamily: 'Poppins',
|
|
),
|
|
},
|
|
),
|
|
),
|
|
if (widget.bio!.isNotEmpty && widget.bio!.length > 100)
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: getProportionateScreenWidth(12),
|
|
bottom: getProportionateScreenHeight(10),
|
|
),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
isExpanded2 = !isExpanded2;
|
|
});
|
|
},
|
|
child: Text(
|
|
isExpanded2 ? 'Lihat Sedikit' : 'Lihat Semua',
|
|
style: thirdTextStyle.copyWith(
|
|
fontWeight: semiBold,
|
|
color:
|
|
Theme.of(context).brightness == Brightness.dark
|
|
? baruTextutih
|
|
: fourthColor,
|
|
fontSize: getProportionateScreenWidth(12),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|