cool_card_swiper

Description:

cool card swiper

Features #
Design & Developed by Prioxis Technologies
You can create cool swipe card list like this.

Getting started #
You can use this package like as below:
class CardsPage extends StatefulWidget {
const CardsPage({super.key});

@override
State<CardsPage> createState() => _CardsPageState();
}

class _CardsPageState extends State<CardsPage> {
@override
Widget build(BuildContext context) {
final deviceWidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 200,
margin: const EdgeInsets.only(top: 180),
child: Align(
alignment: Alignment.center,
child: Container(
height: 200,
width: deviceWidth < 398 ? 345 : 400,
alignment: Alignment.topCenter,
child: CoolSwiper(
initAnimationOffset: 20,
children: List.generate(
getCardList().length,
(index) => CardContent(
cardItem: getCardList()[index],
deviceWidth: deviceWidth,
),
),
),
),
),
)
],
),
);
}
}

List<CardModel> getCardList() {
final List<CardModel> cardList = [
CardModel("Mellat",80, 6059, "12/26", "assets/images/mellat.png", Colors.red),
CardModel("Master",100, 2012, "11/19", "assets/images/mastercard.png",
Colors.yellow.shade700),
CardModel("PayPal",20, 7923, "02/05", "assets/images/paypal.png", Colors.blue),
CardModel("Visa",270, 9881, "07/22", "assets/images/visa.png", Colors.green),
];
return cardList;
}

class CardModel {
final String bankName;
final double accountBalance;
final int lastCardNumber;
final String expireDate;
final String bankImage;
final Color cardColor;

CardModel(this.bankName,this.accountBalance, this.lastCardNumber, this.expireDate,
this.bankImage, this.cardColor);
}

class TransactionModel {
final String title;
final int price;
final String date;
final bool isSent;

TransactionModel(this.title, this.price, this.date, this.isSent);
}
copied to clipboard