menu detail page

2026-01-16 14:41:09 +07:00
parent 44d48d41d4
commit f4f775b9ed
9 changed files with 623 additions and 316 deletions
@@ -0,0 +1,166 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../../common/extension/extension.dart';
+import '../../../../../common/theme/theme.dart';
+import '../../../../../sample/product_sample_data.dart';
+import '../../../../components/button/button.dart';
+import '../../../../components/button/qty_button.dart';
+import '../../../../components/card/variant_card.dart';
+import '../../../../components/image/image.dart';
+
+@RoutePage()
+class MenuDetailPage extends StatefulWidget {
+  final Product product;
+  const MenuDetailPage({super.key, required this.product});
+
+  @override
+  State<MenuDetailPage> createState() => _MenuDetailPageState();
+}
+
+class _MenuDetailPageState extends State<MenuDetailPage> {
+  final ScrollController _scrollController = ScrollController();
+  double _titleOpacity = 0.0;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_onScroll);
+  }
+
+  void _onScroll() {
+    // Hitung opacity berdasarkan scroll offset
+    // Mulai muncul dari offset 150, full opacity di offset 220
+    double offset = _scrollController.offset;
+    double newOpacity = ((offset - 150) / 70).clamp(0.0, 1.0);
+
+    if (newOpacity != _titleOpacity) {
+      setState(() => _titleOpacity = newOpacity);
+    }
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      bottomNavigationBar: Container(
+        padding: EdgeInsets.all(AppValue.padding).copyWith(bottom: 24),
+        decoration: BoxDecoration(
+          color: AppColor.white,
+          boxShadow: [
+            BoxShadow(
+              color: AppColor.black.withOpacity(0.1),
+              offset: Offset(2, 0),
+              blurRadius: 10,
+            ),
+          ],
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(flex: 1, child: QtyButton()),
+            SizedBox(width: 16),
+            Expanded(
+              flex: 2,
+              child: AppElevatedButton(
+                onPressed: () {},
+                title: '+ Keranjang ${"27000".currencyFormatRp}',
+              ),
+            ),
+          ],
+        ),
+      ),
+      body: CustomScrollView(
+        controller: _scrollController,
+        slivers: [
+          SliverAppBar(
+            expandedHeight: 240,
+            pinned: true,
+            backgroundColor: Colors.white,
+            title: AnimatedOpacity(
+              opacity: _titleOpacity,
+              duration: Duration(milliseconds: 200),
+              child: Text(
+                widget.product.name,
+                style: TextStyle(
+                  color: Colors.black,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+            flexibleSpace: FlexibleSpaceBar(
+              background: Stack(
+                children: [
+                  ImagePlaceholder(width: double.infinity, height: 240),
+                ],
+              ),
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: Container(
+              padding: EdgeInsets.all(16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    widget.product.name,
+                    style: AppStyle.xl.copyWith(fontWeight: FontWeight.bold),
+                  ),
+                  SizedBox(height: 4),
+                  Text(
+                    widget.product.description,
+                    style: AppStyle.md.copyWith(fontWeight: FontWeight.w500),
+                  ),
+                  SizedBox(height: 8),
+                  Align(
+                    alignment: Alignment.centerRight,
+                    child: Text(
+                      widget.product.price.currencyFormatRp,
+                      style: AppStyle.xxl.copyWith(
+                        color: AppColor.primary,
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: Container(
+              width: double.infinity,
+              height: 6,
+              decoration: BoxDecoration(color: AppColor.borderLight),
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: Container(
+              padding: EdgeInsets.all(16),
+              decoration: BoxDecoration(),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    'Pilih Varian',
+                    style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
+                  ),
+                  SizedBox(height: 12),
+                  VariantCard(name: 'Small'),
+                  SizedBox(height: 8),
+                  VariantCard(name: 'Normal', isSelected: true),
+                  SizedBox(height: 8),
+                  VariantCard(name: 'Large'),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -1,9 +1,11 @@
+import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';

 import '../../../../common/theme/theme.dart';
 import '../../../../sample/product_sample_data.dart';
 import '../../../components/card/product_card.dart';
 import '../../../components/card/product_empty_card.dart';
+import '../../../router/app_router.gr.dart';

 class MenuProductSection extends StatelessWidget {
  final ProductCategory category;
@@ -60,7 +62,12 @@ class MenuProductSection extends StatelessWidget {
              ),
              itemCount: categoryProducts.length,
              itemBuilder: (context, index) {
-                return ProductCard(product: categoryProducts[index]);
+                return ProductCard(
+                  product: categoryProducts[index],
+                  onTap: () => context.router.push(
+                    MenuDetailRoute(product: categoryProducts[index]),
+                  ),
+                );
              },
            ),
        ],