import 'dart:async'; import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; //import '../models/articles.dart'; class CardArticle extends StatefulWidget { const CardArticle( {super.key, required this.couleurCpay, required this.id, required this.id_categorie, required this.categorie, required this.photos, required this.designation, required this.prix_ticket, required this.reference, required this.pourcentage, required this.date_tirage}); final String id; final String id_categorie; final String categorie; final String photos; final String designation; final String prix_ticket; final String reference; final int pourcentage; final String date_tirage; //final Article article; final Color couleurCpay; @override State createState() => _CardArticleState(); } class _CardArticleState extends State { double init = 0.0; double percent = 0; late Timer time; progressAnimation(int nb) { if (mounted) { setState(() { if (init < nb / 100) { init = init + 0.01; percent = init * 100; } else { time.cancel(); } }); } } animProgress() { time = Timer.periodic(const Duration(milliseconds: 1), (timer) { progressAnimation(widget.pourcentage); }); } @override void initState() { super.initState(); animProgress(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { double screenwidth = MediaQuery.of(context).size.width; return Scaffold( body: Center( child: SizedBox( width: screenwidth, child: Card( elevation: 2, color: widget.couleurCpay.withOpacity(0.8), child: Stack( children: [ Padding( padding: const EdgeInsets.fromLTRB( 0, 7, 0, 0), //EdgeInsets.all(2.0.sp), child: Column( children: [ Expanded( child: Row( children: [ // const SizedBox( // height: 10, // ), Container( //child: Image.network(widget.photos), margin: const EdgeInsets.fromLTRB(7, 0, 0, 0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), image: DecorationImage( fit: BoxFit.contain, image: NetworkImage(widget.photos)), //color: Colors.orange, ), height: 120.h, width: 140.w, child: Align( alignment: Alignment.topRight, child: ClipPath( clipper: TrapeziumClipper(), child: Container( width: 80, height: 80, decoration: BoxDecoration( color: widget.couleurCpay), child: Padding( padding: const EdgeInsets.all(8.0), child: Transform.rotate( angle: pi / 4, child: Align( alignment: const Alignment(0.5, -0.7), child: FittedBox( fit: BoxFit.scaleDown, child: Text( widget.reference, style: TextStyle( fontSize: 12.sp, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'PlusJakartaSans', ), ), ), ), ), ), ), ), ), ), SizedBox( width: 8.w, ), Expanded( child: SizedBox( height: 150.w, //color: Colors.red, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Container( // margin: const EdgeInsets.only(bottom: 5), // //color: Colors.green, // child: FittedBox( // fit: BoxFit.scaleDown, // child: Text( // textAlign: TextAlign.center, // '', // style: TextStyle( // fontSize: 12.sp, // fontWeight: FontWeight.bold, // color: Colors.white, // fontFamily: 'PlusJakartaSans', // ), // ), // ), // ), Container( margin: const EdgeInsets.only( bottom: 10, right: 7, top: 20), //color: Colors.orange, child: Text( //textAlign: TextAlign.center, widget.designation, style: TextStyle( // shadows: [ // Shadow( // color: Colors.black.withOpacity(0.8), // blurRadius: 10.0, // offset: const Offset(0, 4), // ), // ], fontSize: 12.sp, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'PlusJakartaSans', ), ), ), Expanded( child: Card( elevation: 2, margin: const EdgeInsets.fromLTRB( 0, 0, 7, 0), color: widget.couleurCpay, child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ const FittedBox( fit: BoxFit.scaleDown, child: Icon( size: 30, Icons.calendar_month, color: Colors.white, ), ), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment .spaceEvenly, children: [ Expanded( child: SizedBox( width: 150, //color: Colors.red, child: Align( alignment: Alignment .centerLeft, child: FittedBox( fit: BoxFit.scaleDown, child: Text( textAlign: TextAlign .center, 'Ticket 50 000 MGA', style: TextStyle( fontSize: 12.sp, fontWeight: FontWeight .bold, color: Colors.white, fontFamily: 'PlusJakartaSans', ), ), ), ), ), ), Container( color: Colors.white, width: 120, height: 1, ), Expanded( child: SizedBox( width: 150, //color: Colors.red, child: Align( alignment: Alignment .centerLeft, child: FittedBox( fit: BoxFit.scaleDown, child: Text( '${percent.toStringAsFixed(0)}% Avant tirage', style: TextStyle( fontSize: 12.sp, fontWeight: FontWeight .normal, color: Colors.white, fontFamily: 'PlusJakartaSans', ), ), ), ), ), ), ], ) ], )), ), // StepProgressIndicator( // totalSteps: 90, // currentStep: 32, // padding: 2, // selectedColor: Color(0xFF6334A9), // unselectedColor: Colors.white, // roundedEdges: Radius.circular(10), // selectedGradientColor: LinearGradient( // begin: Alignment.topLeft, // end: Alignment.bottomRight, // colors: [ // Color(0xFF6334A9).withOpacity(0.7), // Color(0xFF6334A9) // ], // ), // unselectedGradientColor: LinearGradient( // begin: Alignment.topCenter, // end: Alignment.topLeft, // colors: [Colors.black, Colors.blue]), // ) ], ), ), ) ], ), ), SizedBox( height: 10.sp, ), Stack( children: [ FractionallySizedBox( widthFactor: 1, child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(20)), height: 7.h, child: Padding( padding: const EdgeInsets.all(2.0), child: FractionallySizedBox( alignment: Alignment.centerLeft, widthFactor: init, child: Container( decoration: BoxDecoration( color: widget.couleurCpay, borderRadius: BorderRadius.circular(20)), ), ), ), ), ), Align( alignment: Alignment.center, child: Text( textAlign: TextAlign.center, "${percent.toStringAsFixed(0)} %", style: TextStyle( // shadows: [ // Shadow( // color: Colors.black.withOpacity(0.8), // blurRadius: 10.0, // offset: const Offset(0, 4), // ), // ], fontSize: 5.sp, fontWeight: FontWeight.normal, color: Colors.black, fontFamily: 'PlusJakartaSans', ), ), ), ], ), SizedBox( height: 2.sp, ), ], ), ), Align( alignment: Alignment.topRight, child: widget.date_tirage != '' ? Container( padding: const EdgeInsets.all(2.0), height: 26, width: 100, decoration: const BoxDecoration( color: Colors.red, borderRadius: BorderRadius.only( topRight: Radius.circular(10), bottomLeft: Radius.circular(10))), child: Center( child: FittedBox( fit: BoxFit.scaleDown, child: Text( 'Tirage dans 24:00:00', style: TextStyle( fontSize: 8.sp, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'PlusJakartaSans', ), ), ), ), ) : const SizedBox(), ), ], ), ), ), ), ); } } class TrapeziumClipper extends CustomClipper { @override Path getClip(Size size) { Path path = Path(); path.lineTo(size.width / 2, 0); path.lineTo(size.width, size.height / 2); path.lineTo(size.width, size.height); // path.lineTo(size.width, 0); //path.close(); return path; } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } }