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 createState() => _JustCertificateCountState(); } class _JustCertificateCountState 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 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( 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), ), ) ], ), ); } }