paying animation

This commit is contained in:
Mikkel Troels Kongsted 2025-02-04 10:58:04 +01:00
parent 1db101a26c
commit 247525b80a
3 changed files with 121 additions and 38 deletions

View File

@ -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',

View File

@ -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<CartRepo>();
final ReceiptRepo receiptRepo = context.read<ReceiptRepo>();
final PayingStateRepo payingStateRepo = context.watch<PayingStateRepo>();
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<Color>(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<Color>(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,
),
)
]
},
],
),
)
],
),
);

View File

@ -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,
}