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

feat: update home ui

Browse Source
This commit is contained in:
Efril
2026-06-23 21:27:27 +07:00
parent e236d811ce
commit 83f4e065ed
34 changed files with 2128 additions and 1597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/home/widgets/header.dart
+223 -275
View File
@@ -1,14 +1,17 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../application/analytic/exclusive_summary_loader/exclusive_summary_loader_bloc.dart';
import '../../../../application/auth/auth_bloc.dart';
import '../../../../common/constant/app_constant.dart';
import '../../../../application/outlet/selected_outlet/selected_outlet_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/user/user.dart';
import '../../../components/spacer/spacer.dart';
import 'omset_balance.dart';
import 'header_date_filter.dart';
import 'header_outlet_selector.dart';
import 'header_summary_slider.dart';
import 'header_top_bar.dart';
class HomeHeader extends StatefulWidget {
final int totalRevenue;
@@ -18,12 +21,15 @@ class HomeHeader extends StatefulWidget {
State<HomeHeader> createState() => _HomeHeaderState();
}
class _HomeHeaderState extends State<HomeHeader> with SingleTickerProviderStateMixin {
class _HomeHeaderState extends State<HomeHeader>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _fadeInAnimation;
late Animation<Offset> _slideAnimation;
late Animation<double> _scaleAnimation;
/// 0 = Hari Ini, 1 = MTD (Bulan)
int _selectedDateFilter = 0;
bool _isValueVisible = true;
@override
void initState() {
@@ -42,21 +48,37 @@ class _HomeHeaderState extends State<HomeHeader> with SingleTickerProviderStateM
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.5), end: Offset.zero).animate(
Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.2, 0.8, curve: Curves.easeOutCubic),
),
);
_scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.7, curve: Curves.elasticOut),
),
);
_animationController.forward();
WidgetsBinding.instance.addPostFrameCallback((_) {
_fetchSummary();
});
}
void _fetchSummary() {
final now = DateTime.now();
DateTime dateFrom;
DateTime dateTo;
if (_selectedDateFilter == 0) {
dateFrom = DateTime(now.year, now.month, now.day);
dateTo = DateTime(now.year, now.month, now.day);
} else {
// MTD: tanggal 1 s/d hari ini
dateFrom = DateTime(now.year, now.month, 1);
dateTo = DateTime(now.year, now.month, now.day);
}
context.read<ExclusiveSummaryLoaderBloc>()
..add(ExclusiveSummaryLoaderEvent.rangeDateChanged(dateFrom, dateTo))
..add(const ExclusiveSummaryLoaderEvent.fetched());
}
@override
@@ -67,279 +89,205 @@ class _HomeHeaderState extends State<HomeHeader> with SingleTickerProviderStateM
@override
Widget build(BuildContext context) {
return BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
return Container(
height: 280,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.primary,
AppColor.primaryLight,
AppColor.primaryLight.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: const [0.0, 0.7, 1.0],
return BlocListener<SelectedOutletBloc, SelectedOutletState>(
listenWhen: (prev, curr) =>
prev.selectedOutletId != curr.selectedOutletId,
listener: (context, state) => _fetchSummary(),
child: BlocBuilder<AuthBloc, AuthState>(
builder: (context, authState) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.primary,
AppColor.primary.withOpacity(0.9),
AppColor.primaryLight.withOpacity(0.85),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: const [0.0, 0.7, 1.0],
),
),
boxShadow: [
BoxShadow(
color: AppColor.primary.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Stack(
children: [
// Static decorative circles (right side)
Positioned(
top: -50,
right: -50,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.10),
),
),
),
Positioned(
top: 80,
right: -20,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.05),
),
),
),
Positioned(
top: 150,
right: 30,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.07),
),
),
),
child: Stack(
children: [
// Decorative circles
_buildDecorations(),
// Static decorative circles (left side)
Positioned(
top: 60,
left: -30,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.03),
),
),
),
Positioned(
bottom: 20,
left: -20,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.04),
),
),
),
// Static sparkle icons
...List.generate(8, (index) {
return Positioned(
left: (index * 60.0) % (MediaQuery.of(context).size.width),
top: 30 + (index * 25.0),
child: Icon(
Icons.auto_awesome,
size: 8 + (index % 3) * 3,
color: AppColor.white.withOpacity(0.25),
),
);
}),
// Wave pattern (static)
Positioned.fill(
child: CustomPaint(
painter: WavePainter(
animation: 0.0,
color: AppColor.white.withOpacity(0.08),
),
),
),
// Gradient overlay for depth
Container(
decoration: BoxDecoration(
gradient: RadialGradient(
center: const Alignment(0.8, -0.3),
radius: 1.5,
colors: [
Colors.transparent,
AppColor.primary.withOpacity(0.1),
Colors.transparent,
],
),
),
),
// Main content
SafeArea(child: _buildContent(context, state.user)),
],
),
);
},
);
}
Widget _buildContent(BuildContext context, User user) {
String greeting(BuildContext context) {
final hour = DateTime.now().hour;
if (hour >= 4 && hour < 10) {
return context.lang.good_morning;
} else if (hour >= 10 && hour < 15) {
return context.lang.good_afternoon;
} else if (hour >= 15 && hour < 18) {
return context.lang.good_evening;
} else {
return context.lang.good_night;
}
}
return Padding(
padding: EdgeInsets.all(AppValue.padding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Top bar with enhanced animation
SlideTransition(
position: _slideAnimation,
child: FadeTransition(
opacity: _fadeInAnimation,
child: Transform.scale(
scale: _scaleAnimation.value,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppConstant.appName,
style: AppStyle.lg.copyWith(
color: AppColor.white.withOpacity(0.9),
fontWeight: FontWeight.w600,
letterSpacing: 0.3,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 1),
blurRadius: 2,
),
],
),
),
const SpaceHeight(2),
Text(
user.role.toTitleCase,
style: AppStyle.sm.copyWith(
color: AppColor.white.withOpacity(0.7),
fontSize: 11,
fontWeight: FontWeight.w400,
),
),
],
),
// Wave pattern
Positioned.fill(
child: CustomPaint(
painter: WavePainter(
animation: 0.0,
color: AppColor.white.withOpacity(0.08),
),
// Notification icon
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.25),
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: AppColor.white.withOpacity(0.3),
width: 1,
),
),
// Main content
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Top bar
SlideTransition(
position: _slideAnimation,
child: FadeTransition(
opacity: _fadeInAnimation,
child: HeaderTopBar(user: authState.user),
),
),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.2),
blurRadius: 8,
offset: const Offset(0, 2),
const SpaceHeight(16),
// Outlet selector
SlideTransition(
position: _slideAnimation,
child: FadeTransition(
opacity: _fadeInAnimation,
child: const HeaderOutletSelector(),
),
],
),
child: const Icon(
Icons.notifications_none_rounded,
color: AppColor.white,
size: 20,
),
),
],
),
),
),
),
),
const SpaceHeight(24),
const SpaceHeight(12),
// Greeting Section with enhanced animations
SlideTransition(
position: _slideAnimation,
child: FadeTransition(
opacity: _fadeInAnimation,
child: Transform.scale(
scale: _scaleAnimation.value,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${greeting(context)}, ${user.name}! 👋',
style: AppStyle.md.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w500,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 1),
blurRadius: 2,
// Date filter tabs
FadeTransition(
opacity: _fadeInAnimation,
child: HeaderDateFilter(
selectedIndex: _selectedDateFilter,
onChanged: (index) {
setState(() => _selectedDateFilter = index);
_fetchSummary();
},
),
],
),
),
const SpaceHeight(12),
// Ringkasan label
FadeTransition(
opacity: _fadeInAnimation,
child: _buildRingkasanLabel(),
),
const SpaceHeight(12),
// Sliding summary cards
FadeTransition(
opacity: _fadeInAnimation,
child: HeaderSummarySlider(
isValueVisible: _isValueVisible,
),
),
],
),
],
),
),
),
],
),
),
const SpaceHeight(16),
// Today's highlight
FadeTransition(
opacity: _fadeInAnimation,
child: SlideTransition(
position: _slideAnimation,
child: HomeOmsetBalance(totalOmset: widget.totalRevenue, user: user),
),
),
],
);
},
),
);
}
Widget _buildDecorations() {
return Stack(
children: [
Positioned(
top: -50,
right: -50,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.10),
),
),
),
Positioned(
top: 80,
right: -20,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.05),
),
),
),
Positioned(
top: 60,
left: -30,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.03),
),
),
),
],
);
}
Widget _buildRingkasanLabel() {
final now = DateTime.now();
final dateLabel = _selectedDateFilter == 0
? '${context.lang.summary_today} · ${now.day} ${_monthName(now.month)} ${now.year}'
: '${context.lang.summary_mtd} · 1 - ${now.day} ${_monthName(now.month)} ${now.year}';
return Row(
children: [
Expanded(
child: Text(
dateLabel,
style: AppStyle.sm.copyWith(
color: AppColor.white.withOpacity(0.9),
fontWeight: FontWeight.w600,
),
),
),
GestureDetector(
onTap: () {
setState(() => _isValueVisible = !_isValueVisible);
},
child: Icon(
_isValueVisible
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: AppColor.white.withOpacity(0.7),
size: 20,
),
),
],
);
}
String _monthName(int month) {
const months = [
'Jan',
'Feb',
'Mar',
'Apr',
'Mei',
'Jun',
'Jul',
'Agu',
'Sep',
'Okt',
'Nov',
'Des',
];
return months[month - 1];
}
}