422 lines
16 KiB
Dart
422 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:initial_folder/models/my_certificate.dart';
|
|
import 'package:initial_folder/providers/certificate_provider.dart';
|
|
import 'package:initial_folder/screens/course/sertif.dart';
|
|
import 'package:initial_folder/screens/course/sertif_view.dart';
|
|
import 'package:initial_folder/size_config.dart';
|
|
import 'package:initial_folder/theme.dart';
|
|
import 'package:initial_folder/widgets/custom_navigator.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:shimmer/shimmer.dart';
|
|
import 'package:initial_folder/screens/certificate/component/just_certificate_count.dart';
|
|
|
|
class CertificateItem extends StatefulWidget {
|
|
const CertificateItem({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<CertificateItem> createState() => _CertificateItemState();
|
|
}
|
|
|
|
class _CertificateItemState extends State<CertificateItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Consumer<CertificateProvider>(
|
|
builder: (context, value, child) {
|
|
return certificateCountComponent('assets/icons/gold-medal.png',
|
|
value.allCertificateCount.toString(), 'Jumlah Sertifikat', context);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget certificateCountComponent(
|
|
String icon,
|
|
String count,
|
|
String content,
|
|
BuildContext context,
|
|
) {
|
|
return ShaderMask(
|
|
shaderCallback: (Rect rect) {
|
|
return LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Colors.black,
|
|
Colors.transparent,
|
|
Colors.transparent,
|
|
Colors.black
|
|
],
|
|
stops: [0.0, 0.02, 0.98, 1.0],
|
|
).createShader(rect);
|
|
},
|
|
blendMode: BlendMode.dstOut,
|
|
child: Consumer<CertificateProvider>(
|
|
builder: (context, state, _) {
|
|
if (state.state == ResultState.HasData) {
|
|
return Column(
|
|
children: [
|
|
SizedBox(height: getProportionateScreenHeight(10)),
|
|
Container(
|
|
padding:
|
|
EdgeInsets.only(top: getProportionateScreenHeight(10)),
|
|
height: getProportionateScreenWidth(550),
|
|
child: ListView.builder(
|
|
itemCount: state.allCertificate?.length,
|
|
itemBuilder: (context, index) {
|
|
return allCertificates(state, index, instructorProfile,
|
|
buttonOpacity, buttonActivator);
|
|
},
|
|
),
|
|
)
|
|
],
|
|
);
|
|
} else if (state.state == ResultState.Loading) {
|
|
return Shimmer.fromColors(
|
|
baseColor: Colors.grey,
|
|
highlightColor: Colors.white,
|
|
child: Column(
|
|
children: [
|
|
SizedBox(height: getProportionateScreenHeight(10)),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: getProportionateScreenWidth(100),
|
|
height: getProportionateScreenHeight(20),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: Colors.white),
|
|
),
|
|
SizedBox(width: getProportionateScreenHeight(130)),
|
|
Container(
|
|
width: getProportionateScreenWidth(50),
|
|
height: getProportionateScreenHeight(20),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: Colors.white),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
padding:
|
|
EdgeInsets.only(top: getProportionateScreenHeight(10)),
|
|
height: getProportionateScreenWidth(500),
|
|
child: ListView.builder(
|
|
itemCount: 5,
|
|
itemBuilder: (context, index) {
|
|
return Padding(
|
|
padding: EdgeInsets.only(
|
|
top: getProportionateScreenHeight(20)),
|
|
child: Container(
|
|
height: getProportionateScreenHeight(90),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: Colors.white),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
} else if (state.state == ResultState.NoData) {
|
|
return Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
JustCertificateCount(),
|
|
],
|
|
),
|
|
Center(
|
|
child: Padding(
|
|
padding:
|
|
EdgeInsets.only(top: getProportionateScreenHeight(180)),
|
|
child: Text('Sertifikat Tidak Tersedia'),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
} else if (state.state == ResultState.Error) {
|
|
return Center(
|
|
child: Text('Terjadi Kesalahan'),
|
|
);
|
|
} else {
|
|
return Center(
|
|
child: Text(''),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
instructorProfile(DataMyCertificateModel certificate) {
|
|
if (certificate.fotoProfile == null) {
|
|
return Image.asset(
|
|
"assets/images/Profile Image.png",
|
|
width: getProportionateScreenWidth(21),
|
|
height: getProportionateScreenHeight(21),
|
|
);
|
|
} else
|
|
return CircleAvatar(
|
|
radius: getProportionateScreenWidth(10),
|
|
backgroundImage: NetworkImage(certificate.fotoProfile!),
|
|
);
|
|
}
|
|
|
|
buttonOpacity(int percentage) {
|
|
if (percentage == 100) {
|
|
return primaryColor;
|
|
} else {
|
|
return Color.fromRGBO(237, 169, 35, 0.5);
|
|
}
|
|
}
|
|
|
|
buttonActivator(int percentage, BuildContext context,
|
|
DataMyCertificateModel certificate) {
|
|
if (percentage == 100) {
|
|
return () {
|
|
Navigator.push(
|
|
context,
|
|
CustomNavigator(
|
|
child: Sertif(
|
|
idCourse: int.parse(certificate.courseId!),
|
|
totalProgress: certificate.progress,
|
|
),
|
|
),
|
|
);
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
buttonActivatorView(int percentage, BuildContext context,
|
|
DataMyCertificateModel certificate) {
|
|
if (percentage == 100) {
|
|
return () {
|
|
Navigator.push(
|
|
context,
|
|
CustomNavigator(
|
|
child: SertifView(
|
|
idCourse: int.parse(certificate.courseId!),
|
|
totalProgress: certificate.progress,
|
|
),
|
|
),
|
|
);
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
allCertificates(
|
|
state, index, instructorProfile, buttonOpacity, buttonActivator) {
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(vertical: getProportionateScreenHeight(8)),
|
|
child: Container(
|
|
height: getProportionateScreenHeight(120),
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(10)),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: Theme.of(context).colorScheme.primaryContainer,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
spreadRadius: 0,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Image.asset(
|
|
'assets/images/certificate.png',
|
|
width: getProportionateScreenWidth(45),
|
|
height: getProportionateScreenHeight(45),
|
|
),
|
|
SizedBox(
|
|
width: getProportionateScreenWidth(250),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: getProportionateScreenHeight(13),
|
|
horizontal: getProportionateScreenWidth(3)),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
state.allCertificate![index]!.title!,
|
|
overflow: TextOverflow.ellipsis,
|
|
maxLines: 2,
|
|
style: TextStyle(
|
|
fontSize: getProportionateScreenWidth(13),
|
|
fontWeight: reguler),
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(10)),
|
|
Row(
|
|
children: [
|
|
instructorProfile(state.allCertificate![index]!),
|
|
SizedBox(width: getProportionateScreenWidth(5)),
|
|
Container(
|
|
width: getProportionateScreenHeight(100),
|
|
child: Text(
|
|
state.allCertificate![index]!.instructor!,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: getProportionateScreenHeight(11)),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(3)),
|
|
Row(
|
|
children: [
|
|
Stack(
|
|
children: [
|
|
Container(
|
|
width: (SizeConfig.screenWidth -
|
|
getProportionateScreenWidth(270)),
|
|
height: 10,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: Colors.grey),
|
|
),
|
|
Container(
|
|
width: (SizeConfig.screenWidth -
|
|
getProportionateScreenWidth(270)) *
|
|
state.allCertificate![index]!.progress! /
|
|
100,
|
|
height: 10,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: primaryColor),
|
|
),
|
|
],
|
|
),
|
|
Text(
|
|
" ${state.allCertificate![index]!.progress!.toString()}% ",
|
|
style: TextStyle(
|
|
fontSize: getProportionateScreenWidth(10),
|
|
fontWeight: bold),
|
|
),
|
|
ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
minimumSize: Size(getProportionateScreenWidth(5),
|
|
getProportionateScreenHeight(5)),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
backgroundColor: primaryColor,
|
|
disabledForegroundColor: Colors.grey,
|
|
disabledBackgroundColor: Colors.grey,
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(6)),
|
|
),
|
|
onPressed: buttonActivatorView(
|
|
state.allCertificate![index]!.progress!,
|
|
context,
|
|
state.allCertificate![index]!),
|
|
child: Row(
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: getProportionateScreenHeight(2)),
|
|
child: Text(
|
|
"Lihat\nSertifikat",
|
|
style: TextStyle(
|
|
fontSize: getProportionateScreenHeight(5),
|
|
color: baruTextutih),
|
|
),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(5)),
|
|
SvgPicture.asset(
|
|
'assets/icons/eye.svg',
|
|
fit: BoxFit.fitWidth,
|
|
width: getProportionateScreenWidth(12),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(7)),
|
|
ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
minimumSize: Size(getProportionateScreenWidth(5),
|
|
getProportionateScreenHeight(5)),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
backgroundColor: primaryColor,
|
|
disabledForegroundColor: Colors.grey,
|
|
disabledBackgroundColor: Colors.grey,
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(6)),
|
|
),
|
|
onPressed: buttonActivator(
|
|
state.allCertificate![index]!.progress!,
|
|
context,
|
|
state.allCertificate![index]!),
|
|
child: Row(
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: getProportionateScreenHeight(2)),
|
|
child: Text(
|
|
"Download\nSertifikat",
|
|
style: TextStyle(
|
|
fontSize: getProportionateScreenHeight(5),
|
|
color: baruTextutih),
|
|
),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(5)),
|
|
SvgPicture.asset(
|
|
'assets/icons/download.svg',
|
|
fit: BoxFit.fitWidth,
|
|
width: getProportionateScreenWidth(12),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(10)),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget certificateCountComponents(
|
|
String count,
|
|
BuildContext context,
|
|
) {
|
|
return Center(
|
|
child: ListView(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(20.0),
|
|
constraints: BoxConstraints(
|
|
minHeight: MediaQuery.of(context).size.height / 1.5),
|
|
child: Center(
|
|
child: Text(count),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|