You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
417 lines
19 KiB
417 lines
19 KiB
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<CardArticle> createState() => _CardArticleState();
|
|
}
|
|
|
|
class _CardArticleState extends State<CardArticle> {
|
|
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: <Widget>[
|
|
// 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<Path> {
|
|
@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<Path> oldClipper) {
|
|
return true;
|
|
}
|
|
}
|
|
|