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 createState() => _CertificateItemState(); } class _CertificateItemState extends State { @override Widget build(BuildContext context) { return Consumer( 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( 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), ), ) ], ), ); } }