Skip to content

Commit a60300c

Browse files
nb312nb312
authored
Merge pull request #12 from SahSantoshh/master
@SahSantoshh have complete profile one.
2 parents 74faccd + 26707d3 commit a60300c

File tree

11 files changed

+435
-6
lines changed

11 files changed

+435
-6
lines changed

‎images/profile/profile_arrow_left.png‎

5.34 KB
Loading

‎images/profile/profile_avatar.png‎

26.8 KB
Loading

‎images/profile/profile_follow.png‎

15.6 KB
Loading

‎images/profile/profile_photos_01.png‎

160 KB
Loading

‎images/profile/profile_photos_02.png‎

173 KB
Loading

‎images/profile/profile_photos_03.png‎

39.2 KB
Loading

‎lib/main.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ class MyApp extends StatelessWidget {
2222
SIGN_UP_PAGES[0]: (context) => SignPageOne(),
2323
SIGN_UP_PAGES[1]: (context) => SignPageTwo(),
2424

25+
//PROFILE pages
26+
PROFILE_PAGES[0]: (context) => ProfilePageOne(),
27+
2528
///FEED group page
2629
FEED_PAGES[0]: (context) => FeedPageOne(),
2730
FEED_PAGES[0]: (context) => FeedPageOne(),

‎lib/page/page_const.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export "empty_page.dart";
88
export 'signup/SignPageOne.dart';
99
export 'signup/SignPageTwo.dart';
1010

11+
//PROFILE pages
12+
export 'profile/ProfilePageOne.dart';
13+
1114
export 'feed/FeedPageFour.dart';
1215
export 'feed/FeedPageOne.dart';
1316
export 'feed/FeedPageTen.dart';

‎lib/page/profile/ProfilePageOne.dart‎

Lines changed: 308 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
///
2-
/// Created by NieBin on 2018/12/25
3-
/// Github: https://github.com/nb312
4-
/// Email: niebin312@gmail.com
2+
/// Created by Terrance Duong on 2019/01/03
3+
/// Github: https://github.com/dndoanh
4+
/// Email: dndoanh@gmail.com
55
///
66
import "package:flutter/material.dart";
7+
import 'package:flutter_ui_nice/const/color_const.dart';
8+
import 'package:flutter_ui_nice/page/profile/profile_const.dart';
9+
import 'package:flutter_ui_nice/page/profile/top_bar.dart';
10+
import 'package:flutter_ui_nice/util/SizeUtil.dart';
11+
12+
const photos = [
13+
ProfileImages.photos_01,
14+
ProfileImages.photos_02,
15+
ProfileImages.photos_03,
16+
];
17+
18+
class Photo {
19+
Photo({this.path, this.isImage});
20+
21+
final String path;
22+
final bool isImage;
23+
}
724

825
class ProfilePageOne extends StatefulWidget {
926
@override
@@ -13,11 +30,296 @@ class ProfilePageOne extends StatefulWidget {
1330
class _ProfileState extends State<ProfilePageOne> {
1431
@override
1532
Widget build(BuildContext context) {
33+
Widget _itemPhoto(String img) {
34+
return Container(
35+
margin: EdgeInsets.only(
36+
left: SizeUtil.getAxisX(10.0),
37+
right: SizeUtil.getAxisX(10.0),
38+
),
39+
child: ClipRRect(
40+
borderRadius: new BorderRadius.circular(22.0),
41+
child: Image.asset(
42+
img,
43+
width: SizeUtil.getAxisBoth(PHOTO_BUTTON_HEIGHT),
44+
height: SizeUtil.getAxisBoth(PHOTO_BUTTON_HEIGHT),
45+
),
46+
),
47+
);
48+
}
49+
50+
Widget _itemText(String txt) {
51+
return Container(
52+
margin: EdgeInsets.only(
53+
left: SizeUtil.getAxisX(10.0),
54+
right: SizeUtil.getAxisX(10.0),
55+
),
56+
constraints: BoxConstraints.expand(
57+
height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT),
58+
width: SizeUtil.getAxisX(PHOTO_BUTTON_HEIGHT),
59+
),
60+
decoration: BoxDecoration(
61+
gradient: LinearGradient(
62+
begin: Alignment.topCenter,
63+
colors: [Colors.redAccent, Colors.pinkAccent]),
64+
borderRadius: BorderRadius.circular(22.0),
65+
),
66+
child: Center(
67+
child: Column(
68+
crossAxisAlignment: CrossAxisAlignment.center,
69+
mainAxisAlignment: MainAxisAlignment.center,
70+
children: <Widget>[
71+
Text(
72+
txt,
73+
style: TextStyle(
74+
color: ProfileColors.COLOR_WHITE,
75+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_XL),
76+
),
77+
),
78+
Text(
79+
ProfileStrings.STRING_PHOTOS,
80+
style: TextStyle(
81+
color: ProfileColors.COLOR_WHITE,
82+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S),
83+
),
84+
)
85+
],
86+
),
87+
),
88+
);
89+
}
90+
91+
Widget _buildPhotos() {
92+
return Container(
93+
constraints: BoxConstraints.expand(
94+
height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT)),
95+
child: ListView.builder(
96+
scrollDirection: Axis.horizontal,
97+
itemCount: photos.length > 2 ? photos.length + 1 : photos.length,
98+
itemBuilder: (context, idx) {
99+
if (idx < 2) {
100+
return _itemPhoto(photos[idx]);
101+
} else if (idx == 2) {
102+
if (photos.length > 2) {
103+
return _itemText("+" + photos.length.toString());
104+
} else {
105+
return _itemPhoto(photos[idx]);
106+
}
107+
} else {
108+
return _itemPhoto(photos[idx - 1]);
109+
}
110+
},
111+
),
112+
);
113+
}
114+
115+
Widget _bottomBar() {
116+
return Container(
117+
constraints:
118+
BoxConstraints.expand(height: SizeUtil.getAxisY(BOTTOM_BAR_HEIGHT)),
119+
child: Row(
120+
mainAxisAlignment: MainAxisAlignment.end,
121+
children: <Widget>[
122+
Container(
123+
width: SizeUtil.getAxisX(PHOTO_BUTTON_HEIGHT),
124+
height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT),
125+
decoration: BoxDecoration(
126+
gradient: LinearGradient(
127+
colors: [Color(0x44FFFFFF), Color(0x44FFFFFF)],
128+
begin: Alignment.topLeft,
129+
end: Alignment.bottomRight),
130+
borderRadius: BorderRadius.circular(
131+
SizeUtil.getAxisX(22.0),
132+
),
133+
),
134+
child: Column(
135+
crossAxisAlignment: CrossAxisAlignment.center,
136+
mainAxisAlignment: MainAxisAlignment.center,
137+
children: <Widget>[
138+
Text(
139+
'17,589',
140+
style: TextStyle(
141+
color: TEXT_BLACK,
142+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S),
143+
fontWeight: FontWeight.w700,
144+
),
145+
),
146+
Text(
147+
'followers',
148+
style: TextStyle(
149+
color: ProfileColors.COLOR_DARK,
150+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S),
151+
),
152+
)
153+
],
154+
),
155+
),
156+
Container(
157+
width: SizeUtil.getAxisX(PHOTO_BUTTON_HEIGHT),
158+
height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT),
159+
child: Column(
160+
crossAxisAlignment: CrossAxisAlignment.center,
161+
mainAxisAlignment: MainAxisAlignment.center,
162+
children: <Widget>[
163+
Text(
164+
'9,854',
165+
style: TextStyle(
166+
color: TEXT_BLACK,
167+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S),
168+
fontWeight: FontWeight.w700,
169+
),
170+
),
171+
Text(
172+
'following',
173+
style: TextStyle(
174+
color: ProfileColors.COLOR_DARK,
175+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S),
176+
),
177+
)
178+
],
179+
),
180+
)
181+
],
182+
),
183+
);
184+
}
185+
16186
return Scaffold(
17-
appBar: AppBar(
18-
title: Text("Profile one"),
187+
body: Container(
188+
decoration: BoxDecoration(
189+
gradient: LinearGradient(
190+
colors: [YELLOW, GREEN],
191+
begin: Alignment.topLeft,
192+
end: Alignment.centerLeft,
193+
),
194+
),
195+
child: Column(
196+
children: <Widget>[
197+
TopBar(
198+
leftIcon: ProfileImages.arrow_left,
199+
onLeftIconPressed: () => Navigator.pop(context),
200+
),
201+
Expanded(
202+
child: ListView(
203+
children: <Widget>[
204+
Container(
205+
padding: EdgeInsets.only(
206+
left: 100,
207+
top: 30,
208+
right: 15,
209+
bottom: 30,
210+
),
211+
child: Column(
212+
children: <Widget>[
213+
Row(
214+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
215+
children: <Widget>[
216+
Image.asset(
217+
ProfileImages.avatar,
218+
width: SizeUtil.getAxisY(SQUARE_BUTTON_HEIGHT),
219+
height: SizeUtil.getAxisY(SQUARE_BUTTON_HEIGHT),
220+
),
221+
Container(
222+
width: SizeUtil.getAxisY(REC_BUTTON_WIDTH),
223+
height: SizeUtil.getAxisY(REC_BUTTON_HEIGHT),
224+
decoration: new BoxDecoration(
225+
gradient: LinearGradient(
226+
begin: Alignment.topCenter,
227+
colors: [
228+
ProfileColors.COLOR_BLACK,
229+
ProfileColors.COLOR_GREY,
230+
],
231+
),
232+
borderRadius: new BorderRadius.circular(100.0),
233+
),
234+
child: Material(
235+
color: Colors.transparent,
236+
shape: RoundedRectangleBorder(
237+
borderRadius:
238+
new BorderRadius.circular(100.0),
239+
),
240+
child: InkWell(
241+
onTap: () => debugPrint('Follow pressed'),
242+
splashColor: ProfileColors.COLOR_GREY,
243+
highlightColor: ProfileColors.COLOR_GREY,
244+
borderRadius:
245+
new BorderRadius.circular(100.0),
246+
child: new Center(
247+
child: new Text(
248+
ProfileStrings.STRING_FOLLOW,
249+
style: new TextStyle(
250+
fontSize:
251+
SizeUtil.getAxisBoth(TEXT_SIZE_M),
252+
color: ProfileColors.COLOR_YELLOW,
253+
),
254+
),
255+
),
256+
),
257+
),
258+
)
259+
],
260+
),
261+
SizedBox(height: 20.0),
262+
Row(
263+
children: <Widget>[
264+
Text(
265+
'Hristo Hristov',
266+
style: TextStyle(
267+
color: TEXT_BLACK,
268+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_XXL),
269+
fontWeight: FontWeight.w300,
270+
),
271+
)
272+
],
273+
),
274+
Row(
275+
children: <Widget>[
276+
Text(
277+
'Frankfurt am main',
278+
style: TextStyle(
279+
color: TEXT_BLACK,
280+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_M),
281+
fontWeight: FontWeight.w300,
282+
),
283+
),
284+
Container(
285+
width: 1.0,
286+
height: 12,
287+
color: TEXT_BLACK,
288+
margin: EdgeInsets.only(left: 10, right: 10),
289+
),
290+
Text(
291+
'Germany',
292+
style: TextStyle(
293+
color: TEXT_BLACK,
294+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_M),
295+
fontWeight: FontWeight.w300,
296+
),
297+
)
298+
],
299+
),
300+
],
301+
),
302+
),
303+
_buildPhotos(),
304+
Container(
305+
padding: EdgeInsets.only(
306+
left: 100, top: 30, right: 15, bottom: 30),
307+
child: Text(
308+
'Excepteur sint occacupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occacupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
309+
softWrap: true,
310+
style: TextStyle(
311+
color: TEXT_BLACK,
312+
fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S),
313+
height: 1.5),
314+
),
315+
),
316+
],
317+
),
318+
),
319+
_bottomBar()
320+
],
321+
),
19322
),
20-
body: Text("Profile page one"),
21323
);
22324
}
23325
}

‎lib/page/profile/profile_const.dart‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
///
2+
/// Created by Terrance Duong on 2019/01/03
3+
/// Github: https://github.com/dndoanh
4+
/// Email: dndoanh@gmail.com
5+
///
6+
import "package:flutter/material.dart";
7+
class ProfileStrings {
8+
static const STRING_NAME = "PROFILE";
9+
static const STRING_FOLLOW = "FOLLOW";
10+
static const STRING_PHOTOS = "photos";
11+
}
12+
13+
class ProfileColors {
14+
static const COLOR_BLACK = Color(0xFF010101);
15+
static const COLOR_GREY = Color(0xFF424242);
16+
static const COLOR_WHITE = Color(0xFFF7FFE3);
17+
static const COLOR_DARK = Color(0xFF34323D);
18+
static const COLOR_YELLOW = Color(0xFFF1EA94);
19+
}
20+
21+
const CIRCLE_BUTTON_HEIGHT = 87.0;
22+
const SQUARE_BUTTON_HEIGHT = 127.0;
23+
const PHOTO_BUTTON_HEIGHT = 200.0;
24+
const REC_BUTTON_WIDTH = 255.0;
25+
const REC_BUTTON_HEIGHT = 96.0;
26+
const TOP_BAR_HEIGHT = 152.0;
27+
const TOP_BAR_GRADIENT_HEIGHT = 133.0;
28+
const BOTTOM_BAR_HEIGHT = 200.0;
29+
30+
const TEXT_SIZE_XXL = 50.0;
31+
const TEXT_SIZE_XL = 40.0;
32+
const TEXT_SIZE_L = 28.0;
33+
const TEXT_SIZE_M = 26.0;
34+
const TEXT_SIZE_S = 24.0;
35+
36+
class ProfileImages {
37+
static const IMAGE_PATH = "images/profile";
38+
static const arrow_left = "$IMAGE_PATH/profile_arrow_left.png";
39+
static const avatar = "$IMAGE_PATH/profile_avatar.png";
40+
static const follow = "$IMAGE_PATH/profile_follow.png";
41+
static const photos_01 = "$IMAGE_PATH/profile_photos_01.png";
42+
static const photos_02 = "$IMAGE_PATH/profile_photos_02.png";
43+
static const photos_03 = "$IMAGE_PATH/profile_photos_03.png";
44+
}

0 commit comments

Comments
 (0)