381 lines
14 KiB
Dart
381 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:initial_folder/models/my_certificate.dart';
|
|
import 'package:initial_folder/providers/certificate_provider.dart';
|
|
import 'package:initial_folder/screens/certificate/component/all_certificate_header.dart';
|
|
import 'package:initial_folder/screens/course/sertif.dart';
|
|
import 'package:initial_folder/size_config.dart';
|
|
import 'package:initial_folder/theme.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:shimmer/shimmer.dart';
|
|
|
|
class JustCertificateCount extends StatefulWidget {
|
|
const JustCertificateCount({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<JustCertificateCount> createState() => _JustCertificateCountState();
|
|
}
|
|
|
|
class _JustCertificateCountState extends State<JustCertificateCount> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Consumer<CertificateProvider>(
|
|
builder: (context, value, child) {
|
|
return certificateCountComponent(
|
|
'assets/icons/gold-medal.png',
|
|
value.allCertificateCount.toString(),
|
|
'Jumlah Sertifikat Selesai',
|
|
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)),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
icon,
|
|
width: getProportionateScreenWidth(18),
|
|
height: getProportionateScreenHeight(18),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(8)),
|
|
Text(
|
|
content,
|
|
style: thirdTextStyle.copyWith(
|
|
letterSpacing: 0.42,
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(12)),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(4)),
|
|
Text(
|
|
count,
|
|
style: thirdTextStyle.copyWith(
|
|
letterSpacing: 0.42,
|
|
fontWeight: semiBold,
|
|
fontSize: getProportionateScreenWidth(17)),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(5)),
|
|
],
|
|
);
|
|
} 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 {
|
|
return Column(
|
|
children: [],
|
|
);
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
instructorProfile(DataMyCertificateModel certificate) {
|
|
if (certificate.fotoProfile == null) {
|
|
return Image.asset(
|
|
"assets/images/Profile Image.png",
|
|
scale: getProportionateScreenWidth(12),
|
|
);
|
|
} else
|
|
return CircleAvatar(
|
|
radius: getProportionateScreenWidth(8),
|
|
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,
|
|
MaterialPageRoute(
|
|
builder: (context) => Sertif(
|
|
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(90),
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(8)),
|
|
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(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.all(getProportionateScreenHeight(10)),
|
|
child: Image.asset(
|
|
'assets/icons/gold-medal.png',
|
|
fit: BoxFit.cover,
|
|
scale: getProportionateScreenWidth(2.2),
|
|
)),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: getProportionateScreenHeight(5)),
|
|
child: Container(
|
|
height: double.infinity,
|
|
child:
|
|
VerticalDivider(color: Color.fromRGBO(52, 121, 148, 0.9)),
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: getProportionateScreenWidth(150),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: getProportionateScreenHeight(3),
|
|
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: getProportionateScreenHeight(12),
|
|
fontWeight: reguler),
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(5)),
|
|
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(10)),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: getProportionateScreenHeight(5)),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
width: (SizeConfig.screenWidth -
|
|
getProportionateScreenWidth(245)),
|
|
height: 10,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: Colors.white),
|
|
),
|
|
Container(
|
|
width: (SizeConfig.screenWidth -
|
|
getProportionateScreenWidth(245)) *
|
|
state.allCertificate![index]!.progress! /
|
|
100,
|
|
height: 10,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
color: primaryColor),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: getProportionateScreenWidth(3)),
|
|
child: Container(
|
|
child: Align(
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
"${state.allCertificate![index]!.progress!.toString()}%",
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
color: Colors.white,
|
|
fontWeight: bold),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
backgroundColor: Color.fromRGBO(45, 45, 45, 1),
|
|
disabledForegroundColor:
|
|
Color.fromRGBO(150, 150, 150, 1).withOpacity(0.38),
|
|
disabledBackgroundColor:
|
|
Color.fromRGBO(150, 150, 150, 1).withOpacity(0.12),
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 5, horizontal: getProportionateScreenWidth(5))),
|
|
onPressed: buttonActivator(
|
|
state.allCertificate![index]!.progress!,
|
|
context,
|
|
state.allCertificate![index]!),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
"Download\nSertifikat",
|
|
style: TextStyle(
|
|
fontSize: getProportionateScreenHeight(8),
|
|
color: buttonOpacity(
|
|
state.allCertificate![index]!.progress!)),
|
|
),
|
|
SizedBox(width: getProportionateScreenWidth(5)),
|
|
Image.asset(
|
|
'assets/icons/left-arrow.png',
|
|
color:
|
|
buttonOpacity(state.allCertificate![index]!.progress!),
|
|
fit: BoxFit.fitWidth,
|
|
width: getProportionateScreenWidth(20),
|
|
)
|
|
],
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
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),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|