feat: custom appbar

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
@@ -1,12 +1,10 @@
import 'dart:math' as math;
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import '../../../common/theme/theme.dart';
import '../../components/appbar/appbar.dart';
import '../../components/button/button.dart';
import 'widgets/appbar.dart';
import 'widgets/category_delegate.dart';
import 'widgets/product_tile.dart';
@@ -26,10 +24,6 @@ class _ProductPageState extends State<ProductPage>
List<String> categories = ['Semua', 'Makanan', 'Minuman', 'Snack', 'Dessert'];
ViewType currentViewType = ViewType.grid;
// Animation
late AnimationController _rotationController;
late Animation<double> _rotationAnimation;
// Sample product data
List<Product> products = [
Product(
@@ -135,19 +129,10 @@ class _ProductPageState extends State<ProductPage>
@override
initState() {
super.initState();
_rotationController = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat();
_rotationAnimation = Tween<double>(
begin: 0,
end: 2 * math.pi,
).animate(_rotationController);
}
@override
void dispose() {
_rotationController.dispose();
super.dispose();
}
@@ -172,7 +157,7 @@ class _ProductPageState extends State<ProductPage>
floating: false,
pinned: true,
elevation: 0,
flexibleSpace: ProductAppbar(rotationAnimation: _rotationAnimation),
flexibleSpace: CustomAppBar(title: 'Produk'),
actions: [
ActionIconButton(onTap: () {}, icon: LineIcons.search),
ActionIconButton(onTap: _showAddProductDialog, icon: LineIcons.plus),
@@ -1,96 +0,0 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class ProductAppbar extends StatelessWidget {
final Animation<double> rotationAnimation;
const ProductAppbar({super.key, required this.rotationAnimation});
@override
Widget build(BuildContext context) {
return FlexibleSpaceBar(
titlePadding: const EdgeInsets.only(left: 50, bottom: 16),
title: Text(
'Produk',
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: [
Positioned(
right: -20,
top: -20,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: rotationAnimation.value,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.1),
),
),
);
},
),
),
Positioned(
left: -30,
bottom: -30,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: -rotationAnimation.value * 0.5,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.05),
),
),
);
},
),
),
Positioned(
right: 80,
bottom: 30,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: -rotationAnimation.value * 0.2,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.white.withOpacity(0.08),
),
),
);
},
),
),
],
),
),
);
}
}