Overview
In this blog we build a credit card design using Flutter.
Source Code
import 'package:flutter/material.dart';
class WalletApp extends StatelessWidget {
const WalletApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff171717),
body: CustomScrollView(
slivers: [
const SliverAppBar(
shadowColor: Colors.transparent,
backgroundColor: Color(0xfff171717),
title: ListTile(
title: Text(
"Good morning,",
style: TextStyle(color: Colors.grey, fontSize: 14),
),
subtitle: Text(
"StackedList",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 22),
),
trailing: Icon(
Icons.account_balance_outlined,
color: Colors.white,
),
),
),
SliverToBoxAdapter(
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 12),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 4,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
gradient: const LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [
Color(0xfffD5B3E8),
Color(0xfffE6A5CC),
Color(0xfffFCDBCA),
],
),
boxShadow: [
BoxShadow(
color: Color(0xfffFCDBCA).withOpacity(0.15),
spreadRadius: 5,
blurRadius: 3,
offset: Offset(0, 0),
),
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: const [
Text(
'Credit',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600),
),
Spacer(),
Icon(
Icons.contactless_outlined,
color: Colors.white,
),
],
),
const Spacer(),
const Text(
'Balance',
style: TextStyle(
color: Colors.black,
fontSize: 22,
fontWeight: FontWeight.w500),
),
const Text(
'\$42,000',
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.w700),
),
const Spacer(),
const Text(
'**** **** **** 0123',
style: TextStyle(
color: Colors.white,
fontSize: 19,
fontWeight: FontWeight.w600),
),
],
),
),
),
SliverPadding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
sliver: SliverToBoxAdapter(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
"Transactions",
style: TextStyle(
color: Colors.white,
fontSize: 21,
fontWeight: FontWeight.w600),
),
Text(
"View all",
style: TextStyle(
color: Colors.blueAccent,
fontSize: 15,
fontWeight: FontWeight.w600),
),
],
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
margin: const EdgeInsets.all(5),
child: ListTile(
tileColor: Color(0xfff171717),
leading: Container(
padding: EdgeInsets.all(9),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: transactions[index].icon),
title: Text(transactions[index].name,
style: const TextStyle(
color: Colors.white,
fontSize: 19,
fontWeight: FontWeight.w600)),
subtitle: Text(transactions[index].dateTime,
style:
const TextStyle(color: Colors.grey, fontSize: 14)),
trailing: Text(
transactions[index].amount,
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600),
),
),
);
},
childCount: transactions.length,
),
)
],
),
);
}
}
class Transaction {
final String name;
final String dateTime;
final String amount;
final Widget icon;
Transaction(this.name, this.dateTime, this.amount, this.icon);
}
final List<Transaction> transactions = [
Transaction('Subway', 'Jan 12, 2022 at 4:45 PM', "-\$8.95",
Icon(Icons.fastfood, size: 24, color: Colors.grey.shade600)),
Transaction('Public Transport', 'Jan 12, 2022 at 7:23 PM', "-\$2.79",
Icon(Icons.directions_bus, size: 24, color: Colors.grey.shade600)),
Transaction('Nike', 'Jan 12, 2022 at 8:01 PM', "-\$142.35",
Icon(Icons.shopping_bag, size: 24, color: Colors.grey.shade600)),
Transaction('Apple', 'Jan 12, 2022 at 9:45 PM', "-\$458.05",
Icon(Icons.phone_iphone, size: 24, color: Colors.grey.shade600)),
Transaction('Cineplex', 'Jan 12, 2022 at 10:00 PM', "-\$15.25",
Icon(Icons.theaters, size: 24, color: Colors.grey.shade600)),
Transaction('Popcorn', 'Jan 12, 2022 at 10:29 PM', "-\$22.19",
Icon(Icons.fastfood, size: 24, color: Colors.grey.shade600)),
Transaction('Uber', 'Jan 12, 2022 at 11:55 PM', "-\$9.35",
Icon(Icons.hail, size: 24, color: Colors.grey.shade600)),
];
