From 247525b80a43149b5f0ff421b9b29389577413f8 Mon Sep 17 00:00:00 2001 From: Mikkel Troels Kongsted Date: Tue, 4 Feb 2025 10:58:04 +0100 Subject: [PATCH] paying animation --- mobile/lib/main.dart | 2 + mobile/lib/pages/finish_shopping_page.dart | 132 +++++++++++++++------ mobile/lib/repos/paying_state.dart | 25 ++++ 3 files changed, 121 insertions(+), 38 deletions(-) create mode 100644 mobile/lib/repos/paying_state.dart diff --git a/mobile/lib/main.dart b/mobile/lib/main.dart index 6a72c01..b8dcc56 100644 --- a/mobile/lib/main.dart +++ b/mobile/lib/main.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:mobile/repos/cart.dart'; +import 'package:mobile/repos/paying_state.dart'; import 'package:mobile/repos/product.dart'; import 'package:mobile/repos/receipt.dart'; import 'package:provider/provider.dart'; @@ -21,6 +22,7 @@ class MyApp extends StatelessWidget { ChangeNotifierProvider(create: (_) => ProductRepo()), ChangeNotifierProvider(create: (_) => CartRepo()), ChangeNotifierProvider(create: (_) => ReceiptRepo()), + ChangeNotifierProvider(create: (_) => PayingStateRepo()), ], child: MaterialApp( title: 'Fresh Plaza', diff --git a/mobile/lib/pages/finish_shopping_page.dart b/mobile/lib/pages/finish_shopping_page.dart index 70c1f40..4ce9429 100644 --- a/mobile/lib/pages/finish_shopping_page.dart +++ b/mobile/lib/pages/finish_shopping_page.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:mobile/repos/cart.dart'; +import 'package:mobile/repos/paying_state.dart'; import 'package:mobile/repos/receipt.dart'; import 'package:mobile/widgets/primary_button.dart'; import 'package:mobile/widgets/receipt_item.dart'; @@ -12,50 +13,105 @@ class FinishShoppingPage extends StatelessWidget { Widget build(BuildContext context) { final CartRepo cartRepo = context.read(); final ReceiptRepo receiptRepo = context.read(); + final PayingStateRepo payingStateRepo = context.watch(); final cart = cartRepo.allCartItems(); return Scaffold( - body: Column( - crossAxisAlignment: CrossAxisAlignment.start, + body: Stack( children: [ - const BackButton(), - Container( - margin: const EdgeInsets.all(20), - child: Expanded( - child: ListView.builder( - shrinkWrap: true, - itemBuilder: (_, idx) => ReceiptItemView( - pricePerAmount: cart[idx].product.price, - name: cart[idx].product.name, - amount: cart[idx].amount), - itemCount: cart.length)), - ), - Container( - margin: const EdgeInsets.all(20), - child: Expanded( - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Text( - "Total:", - style: TextStyle(fontWeight: FontWeight.bold), - ), - Text("${cartRepo.totalPrice()} kr"), - ], - )), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const BackButton(), + Container( + margin: const EdgeInsets.all(20), + child: Expanded( + child: ListView.builder( + shrinkWrap: true, + itemBuilder: (_, idx) => ReceiptItemView( + pricePerAmount: cart[idx].product.price, + name: cart[idx].product.name, + amount: cart[idx].amount), + itemCount: cart.length)), + ), + Container( + margin: const EdgeInsets.all(20), + child: Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Text( + "Total:", + style: TextStyle(fontWeight: FontWeight.bold), + ), + Text("${cartRepo.totalPrice()} kr"), + ], + )), + ), + Expanded( + child: Center( + child: PrimaryButton( + onPressed: () async { + payingStateRepo.next(); + receiptRepo.createReceipt(cart); + cartRepo.clearCart(); + await Future.delayed(const Duration(seconds: 1)); + payingStateRepo.next(); + await Future.delayed(const Duration(seconds: 1)); + payingStateRepo.reset(); + if (context.mounted) Navigator.pop(context); + }, + child: const Text("Betal"))), + ), + ], ), + if (payingStateRepo.state != PayingState.unset) ...[ + Container( + color: Colors.black.withValues(alpha: 0.5), + ), + ], Center( - child: PrimaryButton( - onPressed: () { - receiptRepo.createReceipt(cart); - cartRepo.clearCart(); - Navigator.pop(context); - }, - child: const Text("Betal"))), - //const CircularProgressIndicator( - // valueColor: AlwaysStoppedAnimation(Colors.blue), - // strokeWidth: 6.0, - //) + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + ...switch (payingStateRepo.state) { + PayingState.unset => [], + PayingState.loading => [ + Container( + decoration: const BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: Colors.white, + ), + padding: const EdgeInsets.all(20), + child: const SizedBox( + width: 50, + height: 50, + child: CircularProgressIndicator( + valueColor: + AlwaysStoppedAnimation(Colors.blue), + strokeWidth: 6.0, + ), + ), + ), + ], + PayingState.done => [ + Container( + padding: const EdgeInsets.all(10), + decoration: const BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: Colors.white, + ), + child: const Icon( + Icons.check_rounded, + color: Colors.blue, + size: 70, + ), + ) + ] + }, + ], + ), + ) ], ), ); diff --git a/mobile/lib/repos/paying_state.dart b/mobile/lib/repos/paying_state.dart new file mode 100644 index 0000000..6874b4e --- /dev/null +++ b/mobile/lib/repos/paying_state.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; + +class PayingStateRepo extends ChangeNotifier { + PayingState state = PayingState.unset; + + void next() { + state = switch (state) { + PayingState.unset => PayingState.loading, + PayingState.loading => PayingState.done, + PayingState.done => PayingState.done, + }; + notifyListeners(); + } + + void reset() { + state = PayingState.unset; + notifyListeners(); + } +} + +enum PayingState { + unset, + loading, + done, +}