apksel-dev/apskel-owner-flutter
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: home ui update and update api url
Build & Deploy iOS to TestFlight / build-and-deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Efril
2026-07-03 16:00:57 +07:00
parent d02d3b5fbd
commit f9bfb69254
6 changed files with 248 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/home/widgets/header_summary_card.dart
+213 -77
View File
@@ -34,85 +34,202 @@ class HeaderSummaryCard extends StatelessWidget {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.15),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppColor.white.withOpacity(0.2)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Top: Icon + Title + Percentage + Chevron
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: iconColor,
borderRadius: BorderRadius.circular(10),
),
child: Icon(icon, color: Colors.white, size: 20),
),
const SpaceWidth(10),
Text(
title,
style: AppStyle.md.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
const Spacer(),
if (percentage != null) _buildPercentageBadge(),
const SpaceWidth(6),
Icon(
Icons.chevron_right_rounded,
color: AppColor.white.withOpacity(0.7),
size: 20,
),
],
borderRadius: BorderRadius.circular(18),
gradient: const LinearGradient(
colors: [
Color(0xFFE8000A), // sedikit lebih terang di atas
Color(0xFFC40202), // primary di tengah
Color(0xFF990000), // gelap di bawah
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 0.5, 1.0],
),
boxShadow: [
// Shadow merah di bawah — efek floating/3D
BoxShadow(
color: const Color(0xFFC40202).withOpacity(0.55),
blurRadius: 16,
spreadRadius: 0,
offset: const Offset(0, 8),
),
const SpaceHeight(12),
// Value (hidden or visible)
isValueVisible
? Text(
value.currencyFormatRp,
style: AppStyle.h1.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w900,
fontSize: 26,
),
)
: Text(
'Rp ••••••',
style: AppStyle.h1.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w900,
fontSize: 26,
letterSpacing: 2,
),
),
const SpaceHeight(4),
// Subtitle
Text(
subtitle,
style: AppStyle.xs.copyWith(
color: AppColor.white.withOpacity(0.7),
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
),
// Inner highlight di atas kiri (simulasi cahaya)
BoxShadow(
color: AppColor.white.withOpacity(0.08),
blurRadius: 0,
spreadRadius: -1,
offset: const Offset(0, 1),
),
const Spacer(),
// Mini bar chart
_buildMiniBarChart(),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(18),
child: Stack(
children: [
// Top highlight strip — efek glossy
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 1.5,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.white.withOpacity(0.0),
AppColor.white.withOpacity(0.35),
AppColor.white.withOpacity(0.0),
],
),
),
),
),
// Decorative circles
Positioned(
top: -30,
right: -30,
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.07),
),
),
),
Positioned(
bottom: -20,
right: 20,
child: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.05),
),
),
),
Positioned(
top: 40,
left: -20,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.04),
),
),
),
// Content
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Top: Icon + Title + Percentage + Chevron
Row(
children: [
// Icon dengan shadow
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [iconColor.withOpacity(0.9), iconColor],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: iconColor.withOpacity(0.5),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: Icon(icon, color: Colors.white, size: 20),
),
const SpaceWidth(10),
Text(
title,
style: AppStyle.md.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 4,
offset: const Offset(0, 1),
),
],
),
),
const Spacer(),
if (percentage != null) _buildPercentageBadge(),
const SpaceWidth(6),
Icon(
Icons.chevron_right_rounded,
color: AppColor.white.withOpacity(0.7),
size: 20,
),
],
),
const SpaceHeight(12),
// Value
isValueVisible
? Text(
value.currencyFormatRp,
style: AppStyle.h1.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w900,
fontSize: 26,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.25),
blurRadius: 6,
offset: const Offset(0, 2),
),
],
),
)
: Text(
'Rp ••••••',
style: AppStyle.h1.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w900,
fontSize: 26,
letterSpacing: 2,
),
),
const SpaceHeight(4),
// Subtitle
Text(
subtitle,
style: AppStyle.xs.copyWith(
color: AppColor.white.withOpacity(0.7),
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
),
),
const Spacer(),
// Mini bar chart
_buildMiniBarChart(),
],
),
),
],
),
),
),
);
}
@@ -126,6 +243,12 @@ class HeaderSummaryCard extends StatelessWidget {
? const Color(0xFF4CAF50).withOpacity(0.25)
: const Color(0xFFE53E3E).withOpacity(0.25),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isPositive
? const Color(0xFF4CAF50).withOpacity(0.4)
: const Color(0xFFE53E3E).withOpacity(0.4),
width: 0.5,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
@@ -162,18 +285,31 @@ class HeaderSummaryCard extends StatelessWidget {
.fold<int>(0, (a, b) => a > b ? a : b);
return SizedBox(
height: 24,
height: 28,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: dailyData.map((d) {
final ratio = maxVal > 0 ? d.totalCost / maxVal : 0.0;
final isMax = maxVal > 0 && d.totalCost == maxVal;
return Expanded(
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 1.5),
height: 6 + (18 * ratio),
height: 6 + (22 * ratio),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.4),
// Bar tertinggi lebih terang
color: isMax
? AppColor.white.withOpacity(0.75)
: AppColor.white.withOpacity(0.35),
borderRadius: BorderRadius.circular(3),
boxShadow: isMax
? [
BoxShadow(
color: AppColor.white.withOpacity(0.3),
blurRadius: 4,
offset: const Offset(0, -2),
),
]
: null,
),
),
);