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

feat: custom appbar

Browse Source
This commit is contained in:
efrilm
2025-08-16 00:39:09 +07:00
parent d334bb8f17
commit d73cd1a574
16 changed files with 207 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/finance/finance_page.dart
+2 -21
View File
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import '../../../common/theme/theme.dart';
import 'widgets/appbar.dart';
import '../../components/appbar/appbar.dart';
import 'widgets/cash_flow.dart';
import 'widgets/category.dart';
import 'widgets/profit_loss.dart';
@@ -22,14 +22,10 @@ class _FinancePageState extends State<FinancePage>
late AnimationController _slideController;
late AnimationController _fadeController;
late AnimationController _scaleController;
late AnimationController _rotationController;
late AnimationController _floatingController;
late Animation<Offset> _slideAnimation;
late Animation<double> _fadeAnimation;
late Animation<double> _scaleAnimation;
late Animation<double> rotationAnimation;
late Animation<double> floatingAnimation;
String selectedPeriod = 'Hari ini';
final List<String> periods = [
@@ -43,16 +39,6 @@ class _FinancePageState extends State<FinancePage>
void initState() {
super.initState();
rotationAnimation = AnimationController(
duration: const Duration(seconds: 20),
vsync: this,
)..repeat();
floatingAnimation = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat(reverse: true);
_slideController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
@@ -97,8 +83,6 @@ class _FinancePageState extends State<FinancePage>
_slideController.dispose();
_fadeController.dispose();
_scaleController.dispose();
_rotationController.dispose();
_floatingController.dispose();
super.dispose();
}
@@ -115,10 +99,7 @@ class _FinancePageState extends State<FinancePage>
pinned: true,
backgroundColor: AppColor.primary,
elevation: 0,
flexibleSpace: FinanceAppbar(
rotationAnimation: rotationAnimation,
floatingAnimation: floatingAnimation,
),
flexibleSpace: CustomAppBar(title: 'Keuangan'),
),
// Header dengan filter periode
lib/presentation/pages/finance/widgets/appbar.dart
-201
View File
@@ -1,201 +0,0 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class FinanceAppbar extends StatelessWidget {
const FinanceAppbar({
super.key,
required this.rotationAnimation,
required this.floatingAnimation,
});
final Animation<double> rotationAnimation;
final Animation<double> floatingAnimation;
@override
Widget build(BuildContext context) {
return FlexibleSpaceBar(
titlePadding: const EdgeInsets.only(left: 50, bottom: 16),
title: Text(
'Keuangan',
style: AppStyle.xl.copyWith(
color: AppColor.textWhite,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
background: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: AppColor.primaryGradient,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Stack(
children: [
// Animated geometric shapes
Positioned(
right: -20,
top: -20,
child: AnimatedBuilder(
animation: Listenable.merge([
rotationAnimation,
floatingAnimation,
]),
builder: (context, child) {
return Transform.translate(
offset: Offset(
floatingAnimation.value * 10,
floatingAnimation.value * 15,
),
child: Transform.rotate(
angle: rotationAnimation.value * 2 * 3.14159,
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColor.white.withOpacity(0.15),
AppColor.white.withOpacity(0.05),
],
),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.1),
blurRadius: 20,
spreadRadius: 5,
),
],
),
),
),
);
},
),
),
Positioned(
left: -30,
bottom: -30,
child: AnimatedBuilder(
animation: Listenable.merge([
rotationAnimation,
floatingAnimation,
]),
builder: (context, child) {
return Transform.translate(
offset: Offset(
-floatingAnimation.value * 8,
-floatingAnimation.value * 12,
),
child: Transform.rotate(
angle: -rotationAnimation.value * 0.5 * 3.14159,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColor.white.withOpacity(0.1),
AppColor.white.withOpacity(0.02),
],
),
),
),
),
);
},
),
),
Positioned(
right: 80,
bottom: 30,
child: AnimatedBuilder(
animation: Listenable.merge([
rotationAnimation,
floatingAnimation,
]),
builder: (context, child) {
return Transform.translate(
offset: Offset(
floatingAnimation.value * 5,
-floatingAnimation.value * 8,
),
child: Transform.rotate(
angle: -rotationAnimation.value * 0.3 * 3.14159,
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(
colors: [
AppColor.white.withOpacity(0.12),
AppColor.white.withOpacity(0.04),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
),
);
},
),
),
// Additional floating elements
Positioned(
left: 60,
top: 80,
child: AnimatedBuilder(
animation: floatingAnimation,
builder: (context, child) {
return Transform.translate(
offset: Offset(
floatingAnimation.value * 3,
floatingAnimation.value * 6,
),
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.08),
),
),
);
},
),
),
Positioned(
right: 40,
top: 120,
child: AnimatedBuilder(
animation: floatingAnimation,
builder: (context, child) {
return Transform.translate(
offset: Offset(
-floatingAnimation.value * 4,
floatingAnimation.value * 7,
),
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: AppColor.white.withOpacity(0.06),
),
),
);
},
),
),
],
),
),
);
}
}