Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7c0043e

Browse files
Add payment page
1 parent 7bc1628 commit 7c0043e

File tree

1 file changed

+265
-0
lines changed

1 file changed

+265
-0
lines changed

‎lib/pages/payment.dart

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
import 'dart:async';
2+
3+
import 'package:day34/animation/FadeAnimation.dart';
4+
import 'package:day34/pages/payment_success.dart';
5+
import 'package:flutter/material.dart';
6+
7+
class PaymentPage extends StatefulWidget {
8+
const PaymentPage({ Key? key }) : super(key: key);
9+
10+
@override
11+
_PaymentPageState createState() => _PaymentPageState();
12+
}
13+
14+
class _PaymentPageState extends State<PaymentPage> {
15+
int activeCard = 0;
16+
bool _isLoading = false;
17+
late Timer _timer;
18+
19+
pay() {
20+
setState(() {
21+
_isLoading = true;
22+
});
23+
24+
const oneSec = const Duration(seconds: 2);
25+
_timer = new Timer.periodic(
26+
oneSec,
27+
(Timer timer) {
28+
setState(() {
29+
_isLoading = false;
30+
timer.cancel();
31+
Navigator.push(context, MaterialPageRoute(builder: (context) => PaymentSuccess()));
32+
});
33+
},
34+
);
35+
}
36+
37+
@override
38+
Widget build(BuildContext context) {
39+
return Scaffold(
40+
appBar: AppBar(
41+
backgroundColor: Colors.transparent,
42+
elevation: 0,
43+
title: Text('Payment', style: TextStyle(color: Colors.black),),
44+
leading: BackButton(color: Colors.black,),
45+
),
46+
body: SingleChildScrollView(
47+
child: Padding(
48+
padding: EdgeInsets.all(20.0),
49+
child: Column(
50+
crossAxisAlignment: CrossAxisAlignment.start,
51+
children: [
52+
activeCard == 0 ?
53+
FadeAnimation(1.2, AnimatedOpacity(
54+
duration: Duration(milliseconds: 500),
55+
opacity: activeCard == 0 ? 1 : 0,
56+
child: Container(
57+
width: double.infinity,
58+
height: 200,
59+
padding: EdgeInsets.all(20.0),
60+
decoration: BoxDecoration(
61+
borderRadius: BorderRadius.circular(30),
62+
gradient: LinearGradient(
63+
colors: [
64+
Colors.orange,
65+
Colors.yellow.shade800,
66+
Colors.yellow.shade900,
67+
],
68+
begin: Alignment.topLeft,
69+
end: Alignment.bottomRight,
70+
)
71+
),
72+
child: Column(
73+
crossAxisAlignment: CrossAxisAlignment.start,
74+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
75+
children: [
76+
Text("Credit Card", style: TextStyle(color: Colors.white),),
77+
Column(
78+
crossAxisAlignment: CrossAxisAlignment.start,
79+
children: [
80+
Text("**** **** **** 7890", style: TextStyle(color: Colors.white, fontSize: 30),),
81+
SizedBox(height: 5,),
82+
Row(
83+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
84+
children: [
85+
Text("theflutterlover", style: TextStyle(color: Colors.white),),
86+
Image.network('https://img.icons8.com/color/2x/mastercard-logo.png', height: 50),
87+
],
88+
)
89+
],
90+
)
91+
]
92+
),
93+
),
94+
)) :
95+
FadeAnimation(1.2, AnimatedOpacity(
96+
duration: Duration(milliseconds: 500),
97+
opacity: activeCard == 1 ? 1 : 0,
98+
child: Container(
99+
width: double.infinity,
100+
height: 200,
101+
padding: EdgeInsets.all(30.0),
102+
decoration: BoxDecoration(
103+
borderRadius: BorderRadius.circular(30),
104+
// color: Colors.grey.shade200
105+
gradient: LinearGradient(
106+
colors: [
107+
Colors.grey.shade200,
108+
Colors.grey.shade100,
109+
Colors.grey.shade200,
110+
Colors.grey.shade300,
111+
],
112+
begin: Alignment.topLeft,
113+
end: Alignment.bottomRight,
114+
)
115+
),
116+
child: Column(
117+
crossAxisAlignment: CrossAxisAlignment.start,
118+
children: [
119+
Column(
120+
crossAxisAlignment: CrossAxisAlignment.start,
121+
children: [
122+
Image.network('https://img.icons8.com/ios/2x/mac-os.png', height: 50),
123+
SizedBox(height: 30,),
124+
Row(
125+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
126+
crossAxisAlignment: CrossAxisAlignment.end,
127+
children: [
128+
Text("The Flutter Lover", style: TextStyle(color: Colors.black, fontSize: 18),),
129+
Image.network('https://img.icons8.com/ios/2x/sim-card-chip.png', height: 35,),
130+
],
131+
)
132+
],
133+
)
134+
]
135+
),
136+
),
137+
)),
138+
SizedBox(height: 50,),
139+
FadeAnimation(1.2, Text("Payment Method", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),)),
140+
SizedBox(height: 20,),
141+
FadeAnimation(1.3, Row(
142+
children: [
143+
GestureDetector(
144+
onTap: () {
145+
setState(() {
146+
activeCard = 0;
147+
});
148+
},
149+
child: AnimatedContainer(
150+
duration: Duration(milliseconds: 300),
151+
margin: EdgeInsets.only(right: 10),
152+
padding: EdgeInsets.symmetric(horizontal: 20),
153+
decoration: BoxDecoration(
154+
borderRadius: BorderRadius.circular(18),
155+
border: activeCard == 0 ? Border.all(color: Colors.grey.shade300, width: 1)
156+
: Border.all(color: Colors.grey.shade300.withOpacity(0), width: 1),
157+
),
158+
child: Image.network('https://img.icons8.com/color/2x/mastercard-logo.png', height: 50,),
159+
),
160+
),
161+
GestureDetector(
162+
onTap: () {
163+
setState(() {
164+
activeCard = 1;
165+
});
166+
},
167+
child: AnimatedContainer(
168+
duration: Duration(milliseconds: 300),
169+
margin: EdgeInsets.only(right: 10),
170+
padding: EdgeInsets.symmetric(horizontal: 20),
171+
decoration: BoxDecoration(
172+
borderRadius: BorderRadius.circular(18),
173+
border: activeCard == 1 ? Border.all(color: Colors.grey.shade300, width: 1)
174+
: Border.all(color: Colors.grey.shade300.withOpacity(0), width: 1),
175+
),
176+
child: Image.network('https://img.icons8.com/ios-filled/2x/apple-pay.png', height: 50,),
177+
),
178+
),
179+
]
180+
)),
181+
SizedBox(height: 30,),
182+
FadeAnimation(1.4, Container(
183+
height: 50,
184+
padding: EdgeInsets.only(left: 20,),
185+
width: double.infinity,
186+
decoration: BoxDecoration(
187+
borderRadius: BorderRadius.circular(10),
188+
color: Colors.white
189+
),
190+
child: Row(
191+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
192+
children: [
193+
Text("Offers", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),),
194+
TextButton(
195+
onPressed: () {},
196+
child: Text("Add a code")
197+
)
198+
],
199+
),
200+
)),
201+
SizedBox(height: 20,),
202+
FadeAnimation(1.5, Container(
203+
height: 50,
204+
padding: EdgeInsets.only(left: 20,),
205+
width: double.infinity,
206+
decoration: BoxDecoration(
207+
borderRadius: BorderRadius.circular(10),
208+
color: Colors.white
209+
),
210+
child: Row(
211+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
212+
children: [
213+
Text("Address", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),),
214+
TextButton(
215+
onPressed: () {},
216+
child: Row(
217+
children: [
218+
Text("E-75, Diamond Dis..."),
219+
Icon(Icons.keyboard_arrow_down, size: 20,)
220+
],
221+
)
222+
)
223+
],
224+
),
225+
)),
226+
SizedBox(height: 100,),
227+
FadeAnimation(1.5, Row(
228+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
229+
children: [
230+
Text("Total Payment", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),),
231+
Text("\$240.00", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))
232+
],
233+
)),
234+
SizedBox(height: 30),
235+
FadeAnimation(1.4,
236+
MaterialButton(
237+
onPressed: _isLoading ? null : () { pay(); },
238+
height: 50,
239+
elevation: 0,
240+
splashColor: Colors.yellow[700],
241+
shape: RoundedRectangleBorder(
242+
borderRadius: BorderRadius.circular(10)
243+
),
244+
color: Colors.yellow[800],
245+
child: Center(
246+
child: _isLoading ? Container(
247+
width: 20,
248+
height: 20,
249+
child: CircularProgressIndicator(
250+
backgroundColor: Colors.white,
251+
strokeWidth: 3,
252+
color: Colors.black,
253+
),
254+
) : Text("Pay", style: TextStyle(color: Colors.white, fontSize: 18),),
255+
),
256+
),
257+
),
258+
SizedBox(height: 100),
259+
],
260+
),
261+
),
262+
)
263+
);
264+
}
265+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /