Skip to content

Commit ed65013

Browse files
author
Jack
committed
Finished Page three
1 parent 07ac790 commit ed65013

File tree

1 file changed

+143
-159
lines changed

1 file changed

+143
-159
lines changed

‎lib/page/signup/SignPageThree.dart

Lines changed: 143 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import 'package:flutter_ui_nice/const/string_const.dart';
77
import 'dart:io';
88

99
import 'package:flutter_ui_nice/page/signup/widgets/signup_arrow_button.dart';
10+
import '../../const/icons.dart';
1011

1112
class SignPageThree extends StatefulWidget {
1213
@override
@@ -38,137 +39,139 @@ class _SignPageThreeState extends State<SignPageThree> {
3839
child: Column(
3940
crossAxisAlignment: CrossAxisAlignment.start,
4041
children: <Widget>[
41-
Center(child: Image.asset(
42-
SignUpImagePath.SignUpLogo,
43-
height: _media.height/7,
44-
),),
45-
Row(
46-
children: <Widget>[
47-
Container(
48-
height: _media.height/1.7,
49-
width: _media.width/1.25,
50-
51-
decoration: BoxDecoration(
52-
borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
53-
gradient: SIGNUP_CARD_BACKGROUND,
54-
boxShadow: [
55-
BoxShadow(
56-
color: Colors.black12,
57-
blurRadius: 15,
58-
spreadRadius: 8,
59-
),
60-
],
61-
62-
),
63-
child: Padding(
64-
padding: EdgeInsets.only(left: 40,top: 60),
65-
child: new Column(
66-
crossAxisAlignment: CrossAxisAlignment.start,
67-
68-
children: <Widget>[
69-
Text(
70-
'Log in',
71-
style: TextStyle(
72-
fontFamily: "Montserrat",
73-
fontWeight: FontWeight.w300,
74-
fontSize: 40),
75-
),
76-
Text(
77-
'to continue..',
78-
style: TextStyle(
79-
fontFamily: "Montserrat",
80-
fontWeight: FontWeight.w300,
81-
fontSize: 40),
82-
),
83-
SizedBox(height: 40,),
84-
inputText("Username",
85-
_username, false),
86-
Divider(
87-
height: 5,
88-
color: Colors.black,
42+
Center(
43+
child: Image.asset(
44+
SignUpImagePath.SignUpLogo,
45+
height: _media.height / 7,
46+
),
47+
),
48+
Container(
49+
margin: EdgeInsets.only(right: 8.0),
50+
child: Row(
51+
children: <Widget>[
52+
Container(
53+
height: _media.height / 1.7,
54+
width: _media.width / 1.25,
55+
decoration: BoxDecoration(
56+
borderRadius: BorderRadius.only(
57+
topRight: Radius.circular(15),
58+
bottomRight: Radius.circular(15)),
59+
gradient: LinearGradient(
60+
begin: FractionalOffset(0.0, 0.4),
61+
end: FractionalOffset(0.9, 0.7),
62+
// Add one stop for each color. Stops should increase from 0 to 1
63+
stops: [
64+
0.2,
65+
0.9
66+
],
67+
colors: [
68+
Color(0xffFFC3A0),
69+
Color(0xffFFAFBD),
70+
]),
71+
boxShadow: [
72+
BoxShadow(
73+
color: Colors.black12,
74+
blurRadius: 15,
75+
spreadRadius: 8,
8976
),
90-
inputText(
91-
"Password", _password, true),
92-
93-
94-
95-
96-
9777
],
9878
),
99-
),
100-
101-
),
102-
Flexible(
103-
child: Opacity(
104-
opacity: 0.6,
105-
child: new Container(
106-
height: _media.height/1.7-20,
107-
width: 25,
108-
decoration: BoxDecoration(
109-
color: Colors.white,
110-
borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
111-
boxShadow: [
112-
BoxShadow(
113-
color: Colors.black12,
114-
blurRadius: 15,
115-
spreadRadius: 8,
79+
child: Padding(
80+
padding: EdgeInsets.only(left: 30, top: 60),
81+
child: new Column(
82+
crossAxisAlignment: CrossAxisAlignment.start,
83+
children: <Widget>[
84+
Text(
85+
'Log in\nto continue.',
86+
style: TextStyle(
87+
fontFamily: "Montserrat",
88+
fontWeight: FontWeight.w500,
89+
fontSize: 32),
90+
),
91+
SizedBox(
92+
height: 40,
11693
),
94+
Container(
95+
margin: EdgeInsets.only(bottom: 16.0),
96+
child: inputText(
97+
"Email", _username, false, true)),
98+
inputText("Password", _password, true, false),
11799
],
118-
119100
),
120101
),
121102
),
122-
),
123-
Flexible(
124-
child: Opacity(
125-
opacity: 0.4,
126-
child: new Container(
127-
height: _media.height/1.7-40,
128-
width: 25,
129-
decoration: BoxDecoration(
130-
color: Colors.white,
131-
borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
132-
boxShadow: [
133-
BoxShadow(
134-
color: Colors.black12,
135-
blurRadius: 15,
136-
spreadRadius: 8,
137-
),
138-
],
139-
103+
Flexible(
104+
child: Opacity(
105+
opacity: 0.6,
106+
child: new Container(
107+
height: _media.height / 1.7 - 20,
108+
width: 25,
109+
decoration: BoxDecoration(
110+
color: Colors.white,
111+
borderRadius: BorderRadius.only(
112+
topRight: Radius.circular(15),
113+
bottomRight: Radius.circular(15)),
114+
boxShadow: [
115+
BoxShadow(
116+
color: Colors.black12,
117+
blurRadius: 15,
118+
spreadRadius: 8,
119+
),
120+
],
121+
),
140122
),
141123
),
142124
),
143-
),
144-
Flexible(
145-
child: Opacity(
146-
opacity: 0.2,
147-
child: new Container(
148-
height: _media.height/1.7-60,
149-
width: 25,
150-
decoration: BoxDecoration(
151-
color: Colors.white,
152-
borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
153-
boxShadow: [
154-
BoxShadow(
155-
color: Colors.black12,
156-
blurRadius: 15,
157-
spreadRadius: 8,
158-
),
159-
],
160-
125+
Flexible(
126+
child: Opacity(
127+
opacity: 0.3,
128+
child: new Container(
129+
height: _media.height / 1.7 - 40,
130+
width: 25,
131+
decoration: BoxDecoration(
132+
color: Colors.white,
133+
borderRadius: BorderRadius.only(
134+
topRight: Radius.circular(15),
135+
bottomRight: Radius.circular(15)),
136+
boxShadow: [
137+
BoxShadow(
138+
color: Colors.black12,
139+
blurRadius: 15,
140+
spreadRadius: 8,
141+
),
142+
],
143+
),
161144
),
162145
),
163146
),
164-
)
165-
],
147+
Flexible(
148+
child: Opacity(
149+
opacity: 0.1,
150+
child: new Container(
151+
height: _media.height / 1.7 - 60,
152+
width: 25,
153+
decoration: BoxDecoration(
154+
color: Colors.white,
155+
borderRadius: BorderRadius.only(
156+
topRight: Radius.circular(15),
157+
bottomRight: Radius.circular(15)),
158+
boxShadow: [
159+
BoxShadow(
160+
color: Colors.black12,
161+
blurRadius: 15,
162+
spreadRadius: 8,
163+
),
164+
],
165+
),
166+
),
167+
),
168+
)
169+
],
170+
),
166171
),
167-
168172
Padding(
169173
padding: EdgeInsets.symmetric(vertical: 60),
170174
child: Row(
171-
172175
mainAxisAlignment: MainAxisAlignment.center,
173176
crossAxisAlignment: CrossAxisAlignment.center,
174177
children: <Widget>[
@@ -181,54 +184,36 @@ class _SignPageThreeState extends State<SignPageThree> {
181184
),
182185
GestureDetector(
183186
onTap: () => print("Sign Up Tapped"),
184-
child: Text( StringConst.SIGN_UP),
187+
child: Text(StringConst.SIGN_UP),
185188
),
186189
],
187190
),
188191
),
189192
SizedBox(
190193
height: 50,
191194
)
192-
193195
],
194196
),
195197
),
196-
197-
198-
199198
Positioned(
200-
201-
top: _media.height/1.7+_media.height/7+30,
199+
top: _media.height / 1.7 + _media.height / 7 + 30,
202200
left: 20,
203201
child: SignUpArrowButton(
204-
icon: Icons.arrow_forward,
205-
iconSize: 26,
202+
icon: IconData(arrow_right, fontFamily: 'Icons'),
203+
iconSize: 8,
206204
onTap: () => print("Signup Tapped"),
207-
)
208-
209-
),
205+
)),
210206
Positioned(
211-
212-
top: _media.height/1.7+_media.height/7-10,
213-
left: 40,
214-
child: Text(
215-
'Next',
207+
top: _media.height / 1.7 + _media.height / 7 - 10,
208+
left: 30,
209+
child: Text(
210+
'NEXT',
216211
style: TextStyle(
217212
fontFamily: "Montserrat",
218213
fontWeight: FontWeight.w800,
219214
fontSize: 16),
220215
),
221-
222216
),
223-
224-
225-
226-
227-
228-
229-
230-
231-
232217
],
233218
),
234219
),
@@ -237,27 +222,26 @@ class _SignPageThreeState extends State<SignPageThree> {
237222
}
238223
}
239224

240-
Widget inputText(
241-
242-
String hintText,
243-
TextEditingController controller,
244-
bool obSecure,
245-
) {
225+
Widget inputText(String hintText, TextEditingController controller,
226+
bool obSecure, bool border) {
246227
return TextField(
247-
style: TextStyle(height: 1.3),
228+
style: TextStyle(color: Color(0xff353535), fontWeight: FontWeight.bold),
248229
controller: controller,
249-
decoration: InputDecoration(
250-
hintText: hintText,
251-
252-
labelStyle: TextStyle(
253-
fontSize: TEXT_NORMAL_SIZE,
254-
fontFamily: "Montserrat",
255-
fontWeight: FontWeight.w400,
256-
letterSpacing: 1,
257-
height: 0,
258-
),
259-
border: InputBorder.none,
260-
),
230+
decoration: new InputDecoration(
231+
suffixIcon: obSecure
232+
? null
233+
: Padding(
234+
padding: const EdgeInsets.only(right: 32.0),
235+
child: Icon(IconData(0xe902, fontFamily: 'Icons'),
236+
color: Color(0xff35AA90), size: 10.0),
237+
),
238+
border: border ? UnderlineInputBorder() : InputBorder.none,
239+
hintText: hintText,
240+
hintStyle: TextStyle(
241+
color: Color(0xff353535),
242+
fontFamily: "Montserrat",
243+
fontWeight: FontWeight.bold,
244+
fontSize: 16.0)),
261245
obscureText: obSecure,
262246
);
263247
}

0 commit comments

Comments
 (0)