sergey/GymLink_Flutter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basket confirmation page

Browse Source
This commit is contained in:
Sergey Elpashev
2024-05-10 22:08:27 +03:00
parent 4853f61da2
commit 0c11883b48
5 changed files with 219 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/components/basket_item_card.dart
View File

@@ -34,7 +34,7 @@ class BasketItemCard extends StatelessWidget {
),
child: Card(
elevation: 4,
color: const Color(0xFFF2F3F9),
color: Theme.of(context).scaffoldBackgroundColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),

2
lib/components/history_item_card.dart
View File

@@ -40,7 +40,7 @@ class HistoryItemCard extends StatelessWidget {
),
child: Card(
elevation: 4,
color: const Color(0xFFF2F3F9),
color: Theme.of(context).scaffoldBackgroundColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),

62
lib/components/order_confirm_item_card.dart Normal file
View File

@@ -0,0 +1,62 @@
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
class OrderConfirmItemCard extends StatelessWidget {
final String name;
final int count;
final double price;
final Image image;
const OrderConfirmItemCard({
super.key,
required this.name,
required this.count,
required this.price,
required this.image,
});
@override
Widget build(BuildContext context) {
return Padding(
padding:
const EdgeInsetsDirectional.symmetric(horizontal: 10, vertical: 10),
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 130),
child: Card(
elevation: 4,
color: Theme.of(context).scaffoldBackgroundColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
image,
const SizedBox(width: 20),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
name,
style: Theme.of(context).textTheme.bodyLarge,
),
Text('\$$price x $count = \$${price * count}'),
],
)
],
),
MarkdownBody(data: '# X$count')
],
),
),
),
),
);
}
}

8
lib/pages/basket.dart
View File

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:gymlink_module_web/components/app_bar.dart';
import 'package:gymlink_module_web/components/basket_item_card.dart';
import 'package:gymlink_module_web/components/heading.dart';
import 'package:gymlink_module_web/pages/order_confirmation.dart';
import 'package:gymlink_module_web/tools/prefs.dart';
List<Map<String, dynamic>> cart = [
@@ -245,7 +246,12 @@ class _BasketPageState extends State<BasketPage> {
'Итого: $totalPrice',
),
ElevatedButton(
onPressed: () {},
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
const OrderConfirmationPage(),
),
),
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).primaryColor,
shape: const RoundedRectangleBorder(

148
lib/pages/order_confirmation.dart Normal file
View File

@@ -0,0 +1,148 @@
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:gymlink_module_web/components/app_bar.dart';
import 'package:gymlink_module_web/components/heading.dart';
import 'package:gymlink_module_web/components/order_confirm_item_card.dart';
import 'package:gymlink_module_web/tools/prefs.dart';
List<Map<String, dynamic>> cart = [
{
"name": "Протеин",
"image": "product.png",
"price": "120",
"details": "Test details",
"id": "34fa3126-bfaf-5dec-8f4a-b246c097ef73"
},
{
"name": "Протеин",
"image": "product.png",
"price": "150",
"details": "Test details",
"id": "34a26e82-7656-5e98-a44a-c2d01d0b1ad1123"
},
{
"name": "Протеин",
"image": "product.png",
"price": "250",
"details": "Test details",
"id": "4fb204b7-3f9e-52a2-bed1-415c00a31a37123"
},
{
"name": "Протеин",
"image": "product.png",
"price": "300",
"details": "Test details",
"id": "09b2f5bb-683e-5c39-ae89-b8e152fa8bcf123"
},
{
"name": "Протеин",
"image": "product.png",
"price": "100",
"details": "Test details",
"id": "cd1b6817-db94-5394-be1d-af88af79749f123"
}
];
class OrderConfirmationPage extends StatefulWidget {
const OrderConfirmationPage({super.key});
@override
State<OrderConfirmationPage> createState() => _OrderConfirmationPageState();
}
class _OrderConfirmationPageState extends State<OrderConfirmationPage> {
List<Map<String, dynamic>> cartItems = [];
int totalPrice = 0;
@override
void initState() {
super.initState();
getCart().then((value) {
setState(() {
cartItems = value.map((element) {
final item = cart.firstWhere((e) => e['id'] == element['id']);
return {...item, 'count': element['count'] as int};
}).toList();
totalPrice = cartItems.fold(
0,
(sum, item) =>
sum + int.parse(item['price']) * item['count'] as int);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: const GymLinkAppBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const GymLinkHeader(title: 'Оформление заказа'),
const MarkdownBody(data: '## Состав заказа:'),
Expanded(
child: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 350),
child: ListView.builder(
itemCount: cartItems.length,
itemBuilder: (context, index) {
final item = cartItems[index];
return OrderConfirmItemCard(
name: item['name'],
image: Image.asset(item['image'], width: 50, height: 50),
price: double.parse(item['price']),
count: item['count'],
);
},
),
),
),
const SizedBox(
height: 10,
),
Expanded(
child: Column(
children: [
MarkdownBody(data: '## Итого: $totalPrice'),
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: 'Адрес доставки',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: 'Получатель',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
ElevatedButton(
onPressed: () {
debugPrint('Order confirmed');
},
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).primaryColor,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(50)),
),
foregroundColor: Colors.white,
),
child: const Text('Оформить заказ'),
),
const SizedBox(height: 20),
],
),
),
],
),
);
}
}