Skip to content

Commit f50a4b9

Browse files
nb312nb312
authored
Merge pull request #5 from nb312/dev
comply the page 13 of group 5
2 parents 8d07703 + 5895ee9 commit f50a4b9

14 files changed

+280
-10
lines changed

‎images/feed/feed13_header1.png

17.3 KB
Loading

‎images/feed/feed13_header2.png

13.7 KB
Loading

‎images/feed/feed13_header3.png

14.7 KB
Loading

‎images/feed/feed13_pic1.png

55 KB
Loading

‎images/feed/feed13_pic2.png

49 KB
Loading

‎images/feed/feed13_pic3.png

65.1 KB
Loading

‎images/feed/feed13_pic4.png

44.1 KB
Loading

‎lib/const/color_const.dart

+3
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@ const DARK_COLOR = Color(0xFFBDBDBD);
1010
const BOTTOM_COLORS = [MAIN_COLOR, DARK_COLOR];
1111
const YELLOW = Color(0xfffbed96);
1212
const BLUE = Color(0xffabecd6);
13+
const BLUE_DEEP = Color(0xffA8CBFD);
14+
const BLUE_LIGHT = Color(0xffAED3EA);
1315
const PURPLE = Color(0xffccc3fc);
1416
const RED = Color(0xffF2A7B3);
1517
const GREEN = Color(0xffc7e5b4);
1618
const RED_LIGHT = Color(0xffFFC3A0);
1719
const TEXT_BLACK = Color(0xFF353535);
20+
const TEXT_BLACK_LIGHT = Color(0xFF34323D);

‎lib/page/feed/FeedPageEleven.dart

+6-1
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,14 @@ class _FeedState extends State<FeedPageEleven>
2929
});
3030
}
3131

32-
Widget _textBack(content, {size = TEXT_SMALL_2_SIZE, isBold = false}) => Text(
32+
Widget _textBack(content,
33+
{color = TEXT_BLACK_LIGHT,
34+
size = TEXT_SMALL_2_SIZE,
35+
isBold = false}) =>
36+
Text(
3337
content,
3438
style: TextStyle(
39+
color: color,
3540
fontSize: SizeUtil.getAxisBoth(size),
3641
fontWeight: isBold ? FontWeight.w700 : null),
3742
);

‎lib/page/feed/FeedPageTen.dart

+4-4
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ class _FeedState extends State<FeedPageTen> {
101101
"added 127 new photos to the Lorem Ipsum dolr sit amet.")
102102
],
103103
style: TextStyle(
104-
color: TEXT_BLACK,
104+
color: TEXT_BLACK_LIGHT,
105105
fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE),
106106
),
107107
),
@@ -114,7 +114,7 @@ class _FeedState extends State<FeedPageTen> {
114114
child: Text(
115115
"1 MINUTE",
116116
style: TextStyle(
117-
color: TEXT_BLACK,
117+
color: TEXT_BLACK_LIGHT,
118118
fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_SIZE)),
119119
),
120120
);
@@ -138,7 +138,7 @@ class _FeedState extends State<FeedPageTen> {
138138
child: Text(
139139
"LOREM IPSUM",
140140
style: TextStyle(
141-
color: TEXT_BLACK,
141+
color: TEXT_BLACK_LIGHT,
142142
fontSize: SizeUtil.getAxisBoth(TEXT_LARGE_SIZE),
143143
fontWeight: FontWeight.w700),
144144
),
@@ -152,7 +152,7 @@ class _FeedState extends State<FeedPageTen> {
152152
child: Text(
153153
"Cras quis nulla com, aliquam lectus sed, blandit augue. Duis tincidunt urna non pretium",
154154
style: TextStyle(
155-
color: TEXT_BLACK,
155+
color: TEXT_BLACK_LIGHT,
156156
fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE),
157157
),
158158
),

‎lib/page/feed/FeedPageThirteen.dart

+229-3
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,246 @@
44
/// Email: niebin312@gmail.com
55
///
66
import "package:flutter/material.dart";
7+
import 'top_title.dart';
8+
import 'package:flutter_ui_nice/util/SizeUtil.dart';
9+
import 'package:flutter_ui_nice/util/GradientUtil.dart';
10+
import 'feed_const.dart';
11+
import 'package:flutter_ui_nice/const/color_const.dart';
12+
13+
const posts = [
14+
{
15+
"header": FeedImage.feed13_header1,
16+
"name": "Katherine Farmer",
17+
"time": "1 hour ago",
18+
"desc": "Decorate For Less With Art Posters",
19+
"like": "123",
20+
"chat": "67",
21+
"share": "12",
22+
"images": [
23+
FeedImage.feed13_pic1,
24+
FeedImage.feed13_pic2,
25+
FeedImage.feed13_pic3,
26+
FeedImage.feed13_pic4,
27+
]
28+
},
29+
{
30+
"header": FeedImage.feed13_header2,
31+
"name": "Tyler Guerrero",
32+
"time": "2 hour ago",
33+
"desc": "",
34+
"like": "123",
35+
"chat": "67",
36+
"share": "12",
37+
"images": [
38+
FeedImage.feed13_pic1,
39+
FeedImage.feed13_pic2,
40+
FeedImage.feed13_pic3,
41+
FeedImage.feed13_pic4,
42+
]
43+
},
44+
{
45+
"header": FeedImage.feed13_header3,
46+
"name": "Hettie Nguyen",
47+
"time": "3 hour ago",
48+
"desc": "Decorate For Less With Art Posters",
49+
"like": "123",
50+
"chat": "67",
51+
"share": "12",
52+
"images": [
53+
FeedImage.feed13_pic1,
54+
FeedImage.feed13_pic2,
55+
FeedImage.feed13_pic3,
56+
FeedImage.feed13_pic4,
57+
]
58+
},
59+
{
60+
"header": FeedImage.feed13_header1,
61+
"name": "Katherine Farmer",
62+
"time": "4 hour ago",
63+
"desc": "",
64+
"like": "123",
65+
"chat": "67",
66+
"share": "12",
67+
"images": [
68+
FeedImage.feed13_pic1,
69+
FeedImage.feed13_pic2,
70+
FeedImage.feed13_pic3,
71+
FeedImage.feed13_pic4,
72+
]
73+
}
74+
];
775

876
class FeedPageThirteen extends StatefulWidget {
977
@override
1078
_FeedState createState() => _FeedState();
1179
}
1280

1381
class _FeedState extends State<FeedPageThirteen> {
82+
Widget _textBack(content,
83+
{color = TEXT_BLACK_LIGHT,
84+
size = TEXT_SMALL_2_SIZE,
85+
isBold = false}) =>
86+
Text(
87+
content,
88+
style: TextStyle(
89+
color: color,
90+
fontSize: SizeUtil.getAxisBoth(size),
91+
fontWeight: isBold ? FontWeight.w700 : null),
92+
);
93+
94+
Widget _itemHeader(item) => Container(
95+
child: Row(
96+
mainAxisAlignment: MainAxisAlignment.start,
97+
crossAxisAlignment: CrossAxisAlignment.start,
98+
children: <Widget>[
99+
Image.asset(
100+
item["header"],
101+
height: SizeUtil.getAxisBoth(84.0),
102+
width: SizeUtil.getAxisBoth(84.0),
103+
),
104+
SizedBox(
105+
width: SizeUtil.getAxisX(51.0),
106+
),
107+
Column(
108+
mainAxisAlignment: MainAxisAlignment.start,
109+
crossAxisAlignment: CrossAxisAlignment.start,
110+
children: <Widget>[
111+
_textBack(item["name"], size: TEXT_SMALL_3_SIZE, isBold: true),
112+
SizedBox(
113+
height: SizeUtil.getAxisY(13.0),
114+
),
115+
_textBack(item["time"], size: TEXT_NORMAL_SIZE),
116+
],
117+
)
118+
],
119+
),
120+
);
121+
122+
//
123+
Widget _itemAction(item) => Row(
124+
mainAxisAlignment: MainAxisAlignment.start,
125+
crossAxisAlignment: CrossAxisAlignment.center,
126+
children: <Widget>[
127+
_actionChild(Icons.favorite_border, item["like"]),
128+
SizedBox(width: SizeUtil.getAxisX(75.0)),
129+
_actionChild(Icons.chat, item["chat"]),
130+
SizedBox(width: SizeUtil.getAxisX(75.0)),
131+
_actionChild(Icons.share, item["share"]),
132+
],
133+
);
134+
135+
Widget _actionChild(icon, value) => Row(
136+
children: <Widget>[
137+
Icon(
138+
icon,
139+
color: TEXT_BLACK_LIGHT,
140+
size: SizeUtil.getAxisBoth(30.0),
141+
),
142+
SizedBox(width: SizeUtil.getAxisX(20.0)),
143+
_textBack(value),
144+
],
145+
);
146+
147+
Widget _backCard(isEmpty) => Container(
148+
decoration: BoxDecoration(
149+
gradient: !isEmpty ? GradientUtil.red() : GradientUtil.blue(),
150+
borderRadius: BorderRadius.circular(
151+
SizeUtil.getAxisBoth(22.0),
152+
),
153+
boxShadow: [
154+
BoxShadow(color: Color(0x11000000), offset: Offset(0.1, 4.0))
155+
]),
156+
margin: EdgeInsets.only(
157+
left: SizeUtil.getAxisX(80.0), right: SizeUtil.getAxisX(40.0)),
158+
);
159+
160+
Widget _itemText(item) => Container(
161+
child: _textBack(item["desc"], size: TEXT_SMALL_3_SIZE),
162+
);
163+
164+
Widget _itemImages(item) => Container(
165+
alignment: AlignmentDirectional.center,
166+
constraints: BoxConstraints.expand(height: SizeUtil.getAxisY(170.0)),
167+
child: ListView.builder(
168+
itemBuilder: (context, index) {
169+
var img = item["images"][index];
170+
return Container(
171+
margin: EdgeInsets.only(
172+
left: SizeUtil.getAxisX(20.0),
173+
right: SizeUtil.getAxisX(20.0),
174+
),
175+
child: Image.asset(
176+
img,
177+
width: SizeUtil.getAxisBoth(170.0),
178+
height: SizeUtil.getAxisBoth(170.0),
179+
),
180+
);
181+
},
182+
itemCount: item["images"].length,
183+
scrollDirection: Axis.horizontal,
184+
),
185+
);
186+
187+
Widget _listItem(item) => Container(
188+
constraints: BoxConstraints.expand(
189+
height: SizeUtil.getAxisY(
190+
item["desc"].toString().isNotEmpty ? 350.0 : 469.0),
191+
),
192+
margin: EdgeInsets.only(top: SizeUtil.getAxisY(40.0)),
193+
child: Stack(
194+
children: <Widget>[
195+
_backCard(item["desc"].toString().isEmpty),
196+
Positioned(
197+
left: SizeUtil.getAxisX(25.0),
198+
top: SizeUtil.getAxisY(46.0),
199+
child: _itemHeader(item),
200+
),
201+
Positioned(
202+
left: SizeUtil.getAxisX(162.0),
203+
bottom: SizeUtil.getAxisY(45.0),
204+
child: _itemAction(item),
205+
),
206+
item["desc"].toString().isEmpty
207+
? Container(
208+
margin: EdgeInsets.only(top: SizeUtil.getAxisY(20.0)),
209+
alignment: AlignmentDirectional.center,
210+
child: _itemImages(item),
211+
)
212+
: Positioned(
213+
top: SizeUtil.getAxisY(156.0),
214+
left: SizeUtil.getAxisX(160.0),
215+
height: SizeUtil.getAxisY(70.0),
216+
child: _itemText(item),
217+
),
218+
],
219+
),
220+
);
221+
222+
Widget _body() => ListView.builder(
223+
itemBuilder: (context, index) {
224+
var item = posts[index % posts.length];
225+
return _listItem(item);
226+
},
227+
itemCount: posts.length,
228+
padding: EdgeInsets.only(top: 0.1),
229+
);
230+
14231
@override
15232
Widget build(BuildContext context) {
16233
return Scaffold(
17-
appBar: AppBar(
18-
title: Text("Feed Thirteen"),
234+
body: Container(
235+
decoration: BoxDecoration(gradient: GradientUtil.yellowGreen()),
236+
child: Column(
237+
children: <Widget>[
238+
TopTitleBar(
239+
rightImage: FeedImage.feed_add,
240+
),
241+
Expanded(
242+
child: _body(),
243+
)
244+
],
245+
),
19246
),
20-
body: Text("Feed page Thirteen"),
21247
);
22248
}
23249
}

‎lib/page/feed/FeedPageTwelve.dart

+7-2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,14 @@ class FeedPageTwelve extends StatefulWidget {
1515
}
1616

1717
class _FeedState extends State<FeedPageTwelve> {
18-
Widget _textBack(content, {size = TEXT_SMALL_2_SIZE, isBold = false}) => Text(
18+
Widget _textBack(content,
19+
{color = TEXT_BLACK_LIGHT,
20+
size = TEXT_SMALL_2_SIZE,
21+
isBold = false}) =>
22+
Text(
1923
content,
2024
style: TextStyle(
25+
color: color,
2126
fontSize: SizeUtil.getAxisBoth(size),
2227
fontWeight: isBold ? FontWeight.w700 : null),
2328
);
@@ -42,7 +47,7 @@ class _FeedState extends State<FeedPageTwelve> {
4247
Icon(
4348
icon,
4449
size: SizeUtil.getAxisBoth(30.0),
45-
color: TEXT_BLACK,
50+
color: TEXT_BLACK_LIGHT,
4651
),
4752
SizedBox(height: SizeUtil.getAxisY(26.0)),
4853
_textBack(value)

‎lib/page/feed/feed_const.dart

+11
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,21 @@ class FeedImage {
3434
static const feed12_pic2 = "$IMAGE_PATH/feed12_pic2.png";
3535
static const feed12_header = "$IMAGE_PATH/feed12_header.png";
3636
static const feed12_plus = "$IMAGE_PATH/feed12_plus.png";
37+
3738
//Images for Feed1
3839
static const feed1_avatar1 = "$IMAGE_PATH/feed1_avatar1.png";
3940
static const feed1_avatar2 = "$IMAGE_PATH/feed1_avatar2.png";
4041
static const landscape = "$IMAGE_PATH/landscape.png";
4142
static const menonglass = "$IMAGE_PATH/menonglass.png";
4243
static const night = "$IMAGE_PATH/night.png";
44+
45+
//feed 13
46+
static const feed13_header1 = "$IMAGE_PATH/feed13_header1.png";
47+
static const feed13_header2 = "$IMAGE_PATH/feed13_header2.png";
48+
static const feed13_header3 = "$IMAGE_PATH/feed13_header3.png";
49+
50+
static const feed13_pic1 = "$IMAGE_PATH/feed13_pic1.png";
51+
static const feed13_pic2 = "$IMAGE_PATH/feed13_pic2.png";
52+
static const feed13_pic3 = "$IMAGE_PATH/feed13_pic3.png";
53+
static const feed13_pic4 = "$IMAGE_PATH/feed13_pic4.png";
4354
}

‎lib/util/GradientUtil.dart

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
///
2+
/// Created by NieBin on 2018/12/28
3+
/// Github: https://github.com/nb312
4+
/// Email: niebin312@gmail.com
5+
///
6+
import "package:flutter/material.dart";
7+
import 'package:flutter_ui_nice/const/color_const.dart';
8+
9+
class GradientUtil {
10+
static LinearGradient _getLinearGradient(left, right) =>
11+
LinearGradient(colors: [left, right]);
12+
13+
static LinearGradient yellowGreen() => _getLinearGradient(YELLOW, GREEN);
14+
15+
static LinearGradient red() => _getLinearGradient(RED_LIGHT, RED);
16+
17+
static LinearGradient yellowBlue() => _getLinearGradient(YELLOW, BLUE);
18+
19+
static LinearGradient blue() => _getLinearGradient(BLUE_LIGHT, BLUE_DEEP);
20+
}

0 commit comments

Comments
 (0)