Skip to content

Commit 3e080f6

Browse files
shaileshmishrashaileshmishra
shaileshmishra
authored and
shaileshmishra
committed
payment Gateway design added
1 parent 8d6c6d8 commit 3e080f6

File tree

7 files changed

+194
-97
lines changed

7 files changed

+194
-97
lines changed

‎lib/screen/cart/cart_page.dart‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,13 @@ class _CartPageState extends State<CartPage> {
1818
return Scaffold(
1919
//backgroundColor: Colors.grey.shade200,
2020
appBar: buildAppBar(context),
21-
body: Padding(
21+
body: Container(
2222
padding: const EdgeInsets.all(10.0),
23-
child: Expanded(
24-
child: ListView.builder(
25-
itemCount: products.length,
26-
itemBuilder: (context, index) {
27-
return buildCartCard(products[index]);
28-
},
29-
),
23+
child: ListView.builder(
24+
itemCount: products.length,
25+
itemBuilder: (context, index) {
26+
return buildCartCard(products[index]);
27+
},
3028
),
3129
));
3230
}

‎lib/screen/payment/components/_body.dart‎

Lines changed: 168 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,179 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_ecommerce_app/helper/_utils.dart';
3-
import 'package:flutter_ecommerce_app/models/_payment_cart_model.dart';
2+
import 'package:flutter_ecommerce_app/components/_close_activity.dart';
3+
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
4+
import 'package:get/get.dart';
45

5-
Container returnBody(payemnts) {
6-
return Container(
7-
padding: EdgeInsets.all(20),
8-
child: ListView.builder(
9-
itemCount: payemnts.length,
10-
itemBuilder: (context, index) {
11-
return _paycardView(payemnts[index]);
12-
}),
13-
);
14-
}
6+
import '../../../constant.dart';
157

16-
Card _paycardView(PayCard payemnt) {
17-
return Card(
18-
color: Colors.grey.shade400,
19-
child: Padding(
20-
padding: EdgeInsets.all(20),
21-
child: Row(
22-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
8+
Container choosePaymentType() {
9+
return Container(
10+
padding: EdgeInsets.symmetric(horizontal: 30),
11+
child: Column(
12+
crossAxisAlignment: CrossAxisAlignment.start,
13+
children: [
14+
Text(
15+
'Choose payemnt method',
16+
style: TextStyle(
17+
color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16),
18+
),
19+
SizedBox(height: 20),
20+
paymenOptions(),
21+
SizedBox(height: 30),
22+
Text(
23+
'Promo Code',
24+
style: TextStyle(
25+
color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16),
26+
),
27+
SizedBox(height: 20),
28+
promoCodeWidget(),
29+
SizedBox(height: 120),
30+
Row(
2331
children: [
24-
Column(
25-
crossAxisAlignment: CrossAxisAlignment.start,
26-
children: [
27-
Text(
28-
payemnt.title,
29-
style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
30-
),
31-
Text(
32-
"Pay bill using ${payemnt.title}",
33-
style: smallText,
34-
),
35-
],
32+
Text(
33+
'Total payment',
34+
style: TextStyle(color: Colors.black, fontSize: 16),
35+
),
36+
Spacer(),
37+
Text(
38+
'\$500.99',
39+
style: TextStyle(
40+
color: Colors.black,
41+
fontWeight: FontWeight.bold,
42+
fontSize: 18),
3643
),
37-
imgThumbnail(payemnt)
3844
],
39-
)),
45+
),
46+
SizedBox(height: 30),
47+
Container(
48+
height: 45,
49+
width: double.infinity,
50+
child: OutlinedButton(
51+
style: OutlinedButton.styleFrom(
52+
backgroundColor: Colors.black,
53+
shape: RoundedRectangleBorder(
54+
borderRadius: BorderRadius.circular(25.0),
55+
),
56+
side: BorderSide(width: 2, color: Colors.grey.shade500),
57+
),
58+
onPressed: () {
59+
Get.snackbar("Processing", 'Payment is processing',
60+
animationDuration: Duration(seconds: 2));
61+
},
62+
child: Text(
63+
'PAY',
64+
style: TextStyle(color: Colors.white),
65+
),
66+
),
67+
)
68+
],
69+
),
70+
);
71+
}
72+
73+
Row paymenOptions() {
74+
return Row(
75+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
76+
children: [
77+
CircleAvatar(
78+
maxRadius: 25, child: FaIcon(FontAwesomeIcons.amazonPay, size: 35)),
79+
FaIcon(FontAwesomeIcons.ccVisa, size: 35),
80+
FaIcon(FontAwesomeIcons.paypal, size: 35),
81+
FaIcon(FontAwesomeIcons.apple, size: 35),
82+
FaIcon(FontAwesomeIcons.donate, size: 35),
83+
],
4084
);
4185
}
4286

43-
CircleAvatar imgThumbnail(PayCard payemnt) {
44-
return CircleAvatar(
45-
radius: 20,
46-
backgroundColor: Colors.pink,
47-
child: Image.asset(payemnt.image),
87+
Padding creditcardImage() {
88+
return Padding(
89+
padding: EdgeInsets.all(30),
90+
child: Container(
91+
padding: EdgeInsets.all(20),
92+
height: 200,
93+
width: double.infinity,
94+
decoration: creditcardDecoration(),
95+
child: creditCardView(),
96+
),
4897
);
4998
}
99+
100+
AppBar payActionbar() {
101+
return AppBar(
102+
elevation: 0,
103+
backgroundColor: Colors.white,
104+
leading: closeActivity(),
105+
);
106+
}
107+
108+
Container promoCodeWidget() {
109+
return Container(
110+
width: double.infinity,
111+
height: 40,
112+
clipBehavior: Clip.none,
113+
decoration: BoxDecoration(
114+
color: Colors.grey.shade300,
115+
borderRadius: BorderRadius.all(Radius.circular(20))),
116+
child: Align(
117+
alignment: Alignment.centerRight,
118+
child: OutlinedButton(
119+
style: OutlinedButton.styleFrom(
120+
backgroundColor: Colors.black,
121+
shape: RoundedRectangleBorder(
122+
borderRadius: BorderRadius.circular(18.0),
123+
),
124+
side: BorderSide(width: 2, color: Colors.black),
125+
),
126+
onPressed: () {},
127+
child: Text(
128+
'Apply',
129+
style: TextStyle(color: Colors.white),
130+
),
131+
),
132+
),
133+
);
134+
}
135+
136+
Column creditCardView() {
137+
return Column(
138+
crossAxisAlignment: CrossAxisAlignment.start,
139+
children: [
140+
Text(
141+
'Credit Card',
142+
style: TextStyle(
143+
color: Colors.white,
144+
),
145+
),
146+
Spacer(),
147+
Text(
148+
'3763 4367 7346 0046',
149+
style: TextStyle(
150+
color: Colors.white,
151+
fontSize: 18,
152+
),
153+
),
154+
SizedBox(height: kSpace),
155+
Row(
156+
children: [
157+
Text(
158+
'Shailesh Mishra',
159+
style: TextStyle(
160+
color: Colors.white,
161+
),
162+
),
163+
Spacer(),
164+
Icon(
165+
Icons.ac_unit_outlined,
166+
)
167+
],
168+
)
169+
],
170+
);
171+
}
172+
173+
BoxDecoration creditcardDecoration() {
174+
return BoxDecoration(
175+
color: Colors.grey.shade800,
176+
borderRadius: BorderRadius.all(
177+
Radius.circular(20),
178+
));
179+
}

‎lib/screen/payment/components/_view_app_bar.dart‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎lib/screen/payment/components/view_action_bar.dart‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎lib/screen/payment/payment_page.dart‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import 'package:flutter/cupertino.dart';
22
import 'package:flutter/material.dart';
3-
import 'package:flutter_ecommerce_app/screen/payment/components/_view_app_bar.dart';
43

54
import '../../models/_payment_cart_model.dart';
65
import '../../models/_res_files.dart';
@@ -10,6 +9,17 @@ class PaymentPage extends StatelessWidget {
109
@override
1110
Widget build(BuildContext context) {
1211
List<PayCard> payemnts = Res.getPaymentTypes();
13-
return Scaffold(appBar: gatewayAppBar(context), body: returnBody(payemnts));
12+
payemnts.forEach((element) {
13+
print(element.title);
14+
});
15+
return Scaffold(
16+
appBar: payActionbar(),
17+
body: Column(
18+
children: [
19+
creditcardImage(),
20+
choosePaymentType(),
21+
],
22+
),
23+
);
1424
}
1525
}

‎pubspec.lock‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,13 @@ packages:
9595
description: flutter
9696
source: sdk
9797
version: "0.0.0"
98+
font_awesome_flutter:
99+
dependency: "direct main"
100+
description:
101+
name: font_awesome_flutter
102+
url: "https://pub.dartlang.org"
103+
source: hosted
104+
version: "9.1.0"
98105
get:
99106
dependency: "direct main"
100107
description:

‎pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ dependencies:
1414
google_fonts: ^1.1.0
1515
flutter_rating_bar: ^3.0.1+1
1616
smooth_star_rating: ^1.1.1
17+
font_awesome_flutter: ^9.1.0
1718

1819
dev_dependencies:
1920
flutter_test:

0 commit comments

Comments
 (0)