Skip to content

Commit 8d4bfee

Browse files
nb312nb312
committed
comply the 3th page of the feed group.
1 parent e83cc9c commit 8d4bfee

11 files changed

+385
-0
lines changed

‎assets/images/feed/feed_pic3_01.jpg

20.8 KB
Loading

‎assets/images/feed/feed_pic3_02.jpg

26.6 KB
Loading

‎assets/images/feed/feed_pic3_03.jpg

29.4 KB
Loading

‎assets/images/feed/feed_pic3_header_01.jpg

14.4 KB
Loading

‎assets/images/feed/feed_pic3_header_02.jpg

17.6 KB
Loading

‎assets/images/feed/feed_pic3_header_03.jpg

15.8 KB
Loading

‎assets/images/feed/feed_pic3_left.jpg

14.8 KB
Loading

‎lib/main.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ class MyApp extends StatelessWidget {
4444
///FEED group page
4545
FEED_PAGES[0]: (context) => FeedPageOne(),
4646
FEED_PAGES[1]: (context) => FeedPageTwo(),
47+
FEED_PAGES[2]: (context) => FeedThreePage(),
4748
FEED_PAGES[3]: (context) => FeedPageFour(),
4849
FEED_PAGES[4]: (context) => FeedFivePage(),
4950
FEED_PAGES[9]: (context) => FeedPageTen(),

‎lib/page/feed/feed_const.dart

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,15 @@ class FeedImage {
4848
static const feed2_image2 = "$IMAGE_PATH/feed2_image2.png";
4949
static const heart = "$IMAGE_PATH/heart.png";
5050

51+
//feed 3
52+
static const FEED_3_PIC_01 = "$IMAGE_PATH/feed_pic3_01.jpg";
53+
static const FEED_3_PIC_02 = "$IMAGE_PATH/feed_pic3_02.jpg";
54+
static const FEED_3_PIC_03 = "$IMAGE_PATH/feed_pic3_03.jpg";
55+
static const FEED_3_PIC_HEADER_01 = "$IMAGE_PATH/feed_pic3_header_01.jpg";
56+
static const FEED_3_PIC_HEADER_02 = "$IMAGE_PATH/feed_pic3_header_02.jpg";
57+
static const FEED_3_PIC_HEADER_03 = "$IMAGE_PATH/feed_pic3_header_03.jpg";
58+
static const FEED_3_PIC_LEFT = "$IMAGE_PATH/feed_pic3_left.jpg";
59+
5160
//Image for feed 5;
5261
static const feed5_pic_01 = "$IMAGE_PATH/feed_pic5_01.jpg";
5362

‎lib/page/feed/feed_three_page.dart

Lines changed: 374 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
///
2+
/// Created by NieBin on 2019/2/17
3+
/// Github: https://github.com/nb312
4+
/// Email: [email protected]
5+
///
6+
import "package:flutter/material.dart";
7+
import 'feed_const.dart';
8+
import 'package:flutter_ui_nice/util/SizeUtil.dart';
9+
import 'package:flutter_ui_nice/const/_const.dart';
10+
import 'package:flutter_ui_nice/util/GradientUtil.dart';
11+
12+
const contents = [
13+
{
14+
"time": "2019-02-17",
15+
"contents": [
16+
{
17+
"type": 0,
18+
"header": FeedImage.FEED_3_PIC_HEADER_01,
19+
"des": "Hristo added 127 new photos.",
20+
"pic": FeedImage.FEED_3_PIC_01,
21+
"contents": "",
22+
"time": "10m"
23+
},
24+
{
25+
"type": 1,
26+
"header": FeedImage.FEED_3_PIC_HEADER_02,
27+
"des": "Samanta lorem ipsum dolor sit amet.",
28+
"pic": FeedImage.FEED_3_PIC_02,
29+
"contents": "",
30+
"time": "2h"
31+
},
32+
{
33+
"type": 2,
34+
"header": FeedImage.FEED_3_PIC_HEADER_03,
35+
"des": "Mila Valentino loem ipsum dolsit amet.",
36+
"pic": FeedImage.FEED_3_PIC_03,
37+
"contents":
38+
"Excepteur sint occaecat cupitat non proident, sunt in culpa qui officia deserunt mollit anim",
39+
"time": "6h"
40+
},
41+
]
42+
},
43+
{
44+
"time": "2019-02-17",
45+
"contents": [
46+
{
47+
"type": 0,
48+
"header": FeedImage.FEED_3_PIC_HEADER_03,
49+
"des": "Hristo added 127 new photos.",
50+
"pic": FeedImage.FEED_3_PIC_03,
51+
"contents": "",
52+
"time": "10m"
53+
},
54+
{
55+
"type": 1,
56+
"header": FeedImage.FEED_3_PIC_HEADER_01,
57+
"des": "Samanta lorem ipsum dolor sit amet.",
58+
"pic": FeedImage.FEED_3_PIC_01,
59+
"contents": "",
60+
"time": "2h"
61+
},
62+
{
63+
"type": 2,
64+
"header": FeedImage.FEED_3_PIC_HEADER_02,
65+
"des": "Mila Valentino loem ipsum dolsit amet.",
66+
"pic": FeedImage.FEED_3_PIC_02,
67+
"contents":
68+
"Excepteur sint occaecat cupitat non proident, sunt in culpa qui officia deserunt mollit anim",
69+
"time": "6h"
70+
},
71+
]
72+
},
73+
{
74+
"time": "2019-02-17",
75+
"contents": [
76+
{
77+
"type": 0,
78+
"header": FeedImage.FEED_3_PIC_HEADER_01,
79+
"des": "Hristo added 127 new photos.",
80+
"pic": FeedImage.FEED_3_PIC_01,
81+
"contents": "",
82+
"time": "10m"
83+
},
84+
{
85+
"type": 1,
86+
"header": FeedImage.FEED_3_PIC_HEADER_02,
87+
"des": "Samanta lorem ipsum dolor sit amet.",
88+
"pic": FeedImage.FEED_3_PIC_02,
89+
"contents": "",
90+
"time": "2h"
91+
},
92+
{
93+
"type": 2,
94+
"header": FeedImage.FEED_3_PIC_HEADER_03,
95+
"des": "Mila Valentino loem ipsum dolsit amet.",
96+
"pic": FeedImage.FEED_3_PIC_03,
97+
"contents":
98+
"Excepteur sint occaecat cupitat non proident, sunt in culpa qui officia deserunt mollit anim",
99+
"time": "6h"
100+
},
101+
]
102+
},
103+
];
104+
105+
class FeedThreePage extends StatefulWidget {
106+
@override
107+
_FeedThreeState createState() => _FeedThreeState();
108+
}
109+
110+
class _FeedThreeState extends State<FeedThreePage> {
111+
Widget _left() => Container(
112+
padding: EdgeInsets.only(
113+
top: SizeUtil.getAxisY(67),
114+
left: SizeUtil.getAxisX(22),
115+
),
116+
child: Image.asset(
117+
FeedImage.FEED_3_PIC_LEFT,
118+
height: SizeUtil.getAxisBoth(90),
119+
width: SizeUtil.getAxisBoth(90),
120+
),
121+
);
122+
123+
Widget _contentsFirst(json) => Stack(
124+
children: <Widget>[
125+
Container(
126+
margin: EdgeInsets.only(left: SizeUtil.getAxisX(302)),
127+
alignment: Alignment.center,
128+
height: SizeUtil.getAxisY(340),
129+
child: Text(
130+
"+126",
131+
textAlign: TextAlign.center,
132+
style: TextStyle(
133+
color: Colors.white,
134+
fontWeight: FontWeight.w700,
135+
fontSize: SizeUtil.getAxisBoth(40)),
136+
),
137+
decoration: BoxDecoration(
138+
borderRadius: BorderRadius.only(
139+
topLeft: Radius.circular(10),
140+
bottomLeft: Radius.circular(10),
141+
),
142+
image: DecorationImage(
143+
fit: BoxFit.cover,
144+
alignment: Alignment.topRight,
145+
image: AssetImage(
146+
json["pic"],
147+
),
148+
),
149+
),
150+
),
151+
Positioned(
152+
top: SizeUtil.getAxisY(174),
153+
child: Container(
154+
// color: BLUE_LIGHT,
155+
height: SizeUtil.getAxisY(100),
156+
width: SizeUtil.getAxisX(100),
157+
decoration: BoxDecoration(
158+
image: DecorationImage(
159+
image: AssetImage(json["header"]), fit: BoxFit.cover),
160+
borderRadius: BorderRadius.circular(10)),
161+
),
162+
),
163+
Positioned(
164+
top: SizeUtil.getAxisY(310),
165+
child: Container(
166+
width: SizeUtil.getAxisX(230),
167+
child: Text(
168+
json["des"],
169+
style: TextStyle(
170+
fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK),
171+
),
172+
),
173+
),
174+
Container(
175+
color: TEXT_BLACK,
176+
margin: EdgeInsets.only(
177+
top: SizeUtil.getAxisY(430),
178+
),
179+
width: SizeUtil.getAxisX(470),
180+
height: SizeUtil.getAxisY(3),
181+
),
182+
],
183+
);
184+
185+
Widget _contentsSecond(json) => Container(
186+
alignment: Alignment.topLeft,
187+
child: Column(
188+
crossAxisAlignment: CrossAxisAlignment.start,
189+
children: <Widget>[
190+
Container(
191+
margin: EdgeInsets.only(top: SizeUtil.getAxisY(46)),
192+
alignment: Alignment.topLeft,
193+
height: SizeUtil.getAxisY(100),
194+
width: SizeUtil.getAxisX(100),
195+
decoration: BoxDecoration(
196+
image: DecorationImage(
197+
image: AssetImage(json["header"]), fit: BoxFit.cover),
198+
borderRadius: BorderRadius.circular(10)),
199+
),
200+
Container(
201+
padding: EdgeInsets.symmetric(vertical: SizeUtil.getAxisY(44)),
202+
child: Text(
203+
json["des"],
204+
style: TextStyle(
205+
fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK),
206+
),
207+
),
208+
Container(
209+
color: TEXT_BLACK,
210+
width: SizeUtil.getAxisX(470),
211+
height: SizeUtil.getAxisY(3),
212+
),
213+
],
214+
),
215+
);
216+
217+
Widget _contentsThree(json) => Stack(
218+
children: <Widget>[
219+
Positioned(
220+
top: SizeUtil.getAxisY(60),
221+
child: Container(
222+
// color: BLUE_LIGHT,
223+
height: SizeUtil.getAxisY(100),
224+
width: SizeUtil.getAxisX(100),
225+
decoration: BoxDecoration(
226+
image: DecorationImage(
227+
image: AssetImage(json["header"]), fit: BoxFit.cover),
228+
borderRadius: BorderRadius.circular(10)),
229+
),
230+
),
231+
Container(
232+
margin: EdgeInsets.only(
233+
left: SizeUtil.getAxisX(302), top: SizeUtil.getAxisY(34)),
234+
alignment: Alignment.center,
235+
height: SizeUtil.getAxisY(260),
236+
decoration: BoxDecoration(
237+
borderRadius: BorderRadius.only(
238+
topLeft: Radius.circular(10),
239+
bottomLeft: Radius.circular(10),
240+
),
241+
image: DecorationImage(
242+
fit: BoxFit.cover,
243+
alignment: Alignment.topRight,
244+
image: AssetImage(
245+
json["pic"],
246+
),
247+
),
248+
),
249+
),
250+
Positioned(
251+
top: SizeUtil.getAxisY(194),
252+
child: Container(
253+
width: SizeUtil.getAxisX(270),
254+
child: Text(
255+
json["des"],
256+
style: TextStyle(
257+
fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK),
258+
),
259+
),
260+
),
261+
Positioned(
262+
top: SizeUtil.getAxisY(344),
263+
child: Container(
264+
width: SizeUtil.getAxisX(438),
265+
child: Text(
266+
json["contents"],
267+
style: TextStyle(
268+
fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK),
269+
),
270+
),
271+
),
272+
],
273+
);
274+
275+
Widget _listContent(days) => Container(
276+
padding: EdgeInsets.only(left: SizeUtil.getAxisX(48)),
277+
child: Column(
278+
children: <Widget>[
279+
_contentsFirst(days[0]),
280+
_contentsSecond(days[1]),
281+
Expanded(
282+
child: _contentsThree(days[2]),
283+
)
284+
],
285+
),
286+
);
287+
288+
Widget _listDays(days) => Container(
289+
child: Stack(
290+
children: <Widget>[
291+
Positioned(
292+
left: SizeUtil.getAxisX(32),
293+
top: SizeUtil.getAxisY(320),
294+
child: Text(days[0]["time"]),
295+
),
296+
Positioned(
297+
left: SizeUtil.getAxisX(32),
298+
top: SizeUtil.getAxisY(620),
299+
child: Text(days[1]["time"]),
300+
),
301+
Positioned(
302+
left: SizeUtil.getAxisX(32),
303+
top: SizeUtil.getAxisY(900),
304+
child: Text(days[2]["time"]),
305+
),
306+
Container(
307+
height: SizeUtil.getAxisY(1140),
308+
margin: EdgeInsets.only(
309+
top: SizeUtil.getAxisY(52), left: SizeUtil.getAxisY(134)),
310+
decoration: BoxDecoration(
311+
borderRadius: BorderRadius.only(
312+
topLeft: Radius.circular(10),
313+
bottomLeft: Radius.circular(10),
314+
),
315+
gradient: GradientUtil.red()),
316+
),
317+
Container(
318+
height: SizeUtil.getAxisY(1192),
319+
margin: EdgeInsets.only(left: SizeUtil.getAxisY(134)),
320+
child: _listContent(days),
321+
),
322+
],
323+
),
324+
);
325+
326+
Widget _list() => Container(
327+
child: ListView.builder(
328+
itemBuilder: (context, index) => Container(
329+
child: Stack(
330+
children: <Widget>[
331+
Container(
332+
padding: EdgeInsets.symmetric(
333+
horizontal: SizeUtil.getAxisX(134),
334+
vertical: SizeUtil.getAxisY(54)),
335+
child: Text(
336+
contents[index]["time"],
337+
style: TextStyle(
338+
fontSize: SizeUtil.getAxisBoth(26),
339+
fontWeight: FontWeight.w700),
340+
),
341+
),
342+
Container(
343+
padding: EdgeInsets.only(
344+
top: SizeUtil.getAxisY(70),
345+
),
346+
child: Container(
347+
height: SizeUtil.getAxisY(1207),
348+
child: _listDays(contents[index]["contents"]),
349+
),
350+
)
351+
],
352+
),
353+
),
354+
itemCount: contents.length,
355+
shrinkWrap: true,
356+
),
357+
);
358+
359+
@override
360+
Widget build(BuildContext context) {
361+
return Scaffold(
362+
body: Container(
363+
constraints: BoxConstraints.expand(),
364+
decoration: BoxDecoration(gradient: GradientUtil.yellowBlue()),
365+
child: Stack(
366+
children: <Widget>[
367+
// _left(),
368+
_list(),
369+
],
370+
),
371+
),
372+
);
373+
}
374+
}

0 commit comments

Comments
 (0)