Skip to content

Commit 5c7fb31

Browse files
WaffulzWaffulz
committed
Page Four
-Page Four implemented -Clean Code -Const document for Shadows added *Page Four is not finished yet, still have to add images and make it responsive.
1 parent 03315fb commit 5c7fb31

File tree

3 files changed

+218
-62
lines changed

3 files changed

+218
-62
lines changed

‎ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>BuildSystemType</key>
6+
<string>Original</string>
7+
</dict>
8+
</plist>

‎lib/const/shadow_const.dart

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import 'package:flutter/material.dart';
2+
3+
const SHADOW = [
4+
BoxShadow(
5+
color: Colors.black12,
6+
blurRadius: 20.0,
7+
spreadRadius: 5.0,
8+
offset: Offset(
9+
10.0, // horizontal, move right 10
10+
10.0, // vertical, move down 10
11+
),
12+
)
13+
];

‎lib/page/feed/FeedPageFour.dart

Lines changed: 197 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,69 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_ui_nice/const/color_const.dart';
3+
import 'package:flutter_ui_nice/const/shadow_const.dart';
34
import 'package:flutter_ui_nice/page/feed/feed_const.dart';
45
import 'package:flutter_ui_nice/page/feed/top_title.dart';
56
import 'package:flutter_ui_nice/util/SizeUtil.dart';
67

8+
const cardConsts = [
9+
{
10+
"author": "Hristo",
11+
"action": "added 127 new photos to Lorem ipsum dolr sit amet.",
12+
"time": "1 MINUTE",
13+
"like": "123",
14+
"chat": "67",
15+
"share": "12",
16+
"images_number": "+126",
17+
"avatar_image": FeedImage.feed1_avatar2,
18+
"images": [
19+
FeedImage.feed13_pic1,
20+
FeedImage.feed13_pic2,
21+
FeedImage.feed13_pic3,
22+
]
23+
},
24+
{
25+
"author": "Mila",
26+
"action": "added 3 new photos to Lorem ipsum dolr sit amet.",
27+
"time": "12 HOURS",
28+
"like": "123",
29+
"chat": "67",
30+
"share": "12",
31+
"images_number": '0',
32+
"avatar_image": FeedImage.feed1_avatar1,
33+
"images": [
34+
FeedImage.feed13_pic1,
35+
FeedImage.feed13_pic2,
36+
FeedImage.feed13_pic3,
37+
]
38+
},
39+
];
40+
741
class FeedPageFour extends StatefulWidget {
842
@override
943
_FeedPageFourState createState() => _FeedPageFourState();
1044
}
1145

46+
var deviceHeight;
47+
var deviceWidth;
48+
Icon favIcon = Icon(Icons.favorite_border);
49+
Icon chatIcon = Icon(Icons.chat);
50+
Icon shareIcon = Icon(Icons.share);
51+
1252
class _FeedPageFourState extends State<FeedPageFour> {
13-
Widget _pinkCard() {
14-
return Center(
15-
child: Container(
16-
margin: EdgeInsets.symmetric(vertical: 40.0),
17-
height: 450,
18-
width: deviceWidth * 0.73,
19-
decoration: BoxDecoration(
20-
borderRadius: BorderRadius.circular(22.0),
21-
boxShadow: [
22-
BoxShadow(
23-
color: Colors.black12,
24-
blurRadius: 20.0,
25-
spreadRadius: 5.0,
26-
offset: Offset(
27-
10.0, // horizontal, move right 10
28-
10.0, // vertical, move down 10
29-
),
30-
)
31-
],
32-
gradient: LinearGradient(colors: [RED_LIGHT, RED])),
33-
child: Column(
34-
crossAxisAlignment: CrossAxisAlignment.start,
35-
children: <Widget>[
36-
Container(
37-
width: double.infinity,
38-
margin: EdgeInsets.all(22),
39-
child: Text('1 MINUTE',
40-
style: TextStyle(
41-
color: Colors.black38,
42-
fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE)),
43-
textAlign: TextAlign.right),
44-
),
45-
Container(
46-
margin: EdgeInsets.symmetric(horizontal: 20),
47-
child: Text(
48-
'Hristo added 127 new photos to Lorem Ipsum dolr sit amet.')),
49-
Expanded(child: Container()),
50-
Row(
51-
mainAxisAlignment: MainAxisAlignment.center,
52-
children: <Widget>[
53-
_cardAction(favIcon, 123),
54-
Padding(
55-
padding: const EdgeInsets.symmetric(horizontal: 30.0),
56-
child: _cardAction(commentIcon, 67),
57-
),
58-
_cardAction(shareIcon, 12),
59-
],
60-
)
61-
],
62-
),
63-
),
64-
);
65-
}
6653

67-
Icon favIcon = Icon(Icons.favorite_border);
68-
Icon commentIcon = Icon(Icons.chat);
69-
Icon shareIcon = Icon(Icons.share);
7054
Widget _cardAction(Icon icon, int number) {
7155
return Container(
7256
margin: EdgeInsets.only(bottom: 20),
7357
child: Row(
7458
children: <Widget>[
7559
icon,
7660
SizedBox(width: 5),
77-
Text('$number')
61+
Text(
62+
'$number',
63+
style: TextStyle(
64+
color: Colors.black38,
65+
fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE)),
66+
)
7867
],
7968
),
8069
);
@@ -121,9 +110,6 @@ class _FeedPageFourState extends State<FeedPageFour> {
121110
);
122111
}
123112

124-
var deviceHeight;
125-
var deviceWidth;
126-
127113
@override
128114
Widget build(BuildContext context) {
129115
deviceWidth = MediaQuery.of(context).size.width;
@@ -132,14 +118,163 @@ class _FeedPageFourState extends State<FeedPageFour> {
132118
body: Container(
133119
decoration:
134120
BoxDecoration(gradient: LinearGradient(colors: [YELLOW, GREEN])),
135-
child: ListView(
121+
child: Stack(
136122
//crossAxisAlignment: CrossAxisAlignment.center,
137123
children: <Widget>[
124+
_cardClipper(),
138125
TopTitleBar(),
139-
_feedCard(),
140126
],
141127
),
142128
),
143129
);
144130
}
131+
132+
133+
Widget timeText () => Container(
134+
width: double.infinity,
135+
margin: EdgeInsets.all(20),
136+
child: Text(
137+
cardConsts[0]['time'],
138+
textAlign: TextAlign.right,
139+
style: TextStyle(
140+
color: Colors.black38,
141+
fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE)
142+
),
143+
),
144+
);
145+
146+
Widget descriptionText () => Container(
147+
margin: EdgeInsets.symmetric(horizontal: 20),
148+
child: RichText(
149+
text: TextSpan(
150+
text: '${cardConsts[0]['author']} ',
151+
style: TextStyle(
152+
fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE),
153+
fontWeight: FontWeight.bold,
154+
color: TEXT_BLACK
155+
),
156+
children: <TextSpan> [
157+
TextSpan(
158+
text: cardConsts[0]['action'],
159+
style: TextStyle(
160+
fontWeight: FontWeight.normal,
161+
color: TEXT_BLACK_LIGHT
162+
)
163+
)
164+
]
165+
),
166+
),
167+
);
168+
169+
Widget _socialAction (Icon icon, String number) => Container(
170+
child: Row(
171+
children: <Widget>[
172+
icon,
173+
SizedBox(width: 7),
174+
Text(
175+
'$number',
176+
style: TextStyle(
177+
color: Colors.black45,
178+
fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE)
179+
),
180+
)
181+
],
182+
),
183+
);
184+
185+
Widget _socialActionRow() {
186+
return Container(
187+
margin: EdgeInsets.symmetric(vertical: 20),
188+
child: Row(
189+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
190+
children: <Widget>[
191+
_socialAction(favIcon, cardConsts[0]['like']),
192+
_socialAction(chatIcon, cardConsts[0]['chat']),
193+
_socialAction(shareIcon, cardConsts[0]['share'])
194+
],
195+
),
196+
);
197+
}
198+
199+
Widget _cardDetails() {
200+
return Column(
201+
children: <Widget>[
202+
timeText(),
203+
Expanded(
204+
child: descriptionText()
205+
),
206+
_socialActionRow()
207+
],
208+
);
209+
}
210+
211+
Widget _pinkCard() {
212+
return Center(
213+
child: Container(
214+
margin: EdgeInsets.only(top: 50),
215+
height: deviceHeight * 0.6,
216+
width: deviceWidth * 0.75,
217+
decoration: BoxDecoration(
218+
borderRadius: BorderRadius.circular(22.0),
219+
boxShadow: SHADOW,
220+
gradient: LinearGradient(colors: [RED_LIGHT, RED])),
221+
child: _cardDetails(),
222+
),
223+
);
224+
}
225+
226+
Widget _avatarCard() {
227+
return Positioned(
228+
top: deviceHeight * 0.027,
229+
left: deviceWidth * 0.2,
230+
child: Container(
231+
height: 60,
232+
width: 60,
233+
decoration: BoxDecoration(
234+
borderRadius: BorderRadius.circular(7),
235+
image: DecorationImage(
236+
image: AssetImage(cardConsts[0]['avatar_image'])
237+
),
238+
boxShadow: SHADOW,
239+
),
240+
)
241+
);
242+
}
243+
244+
Widget _imagesCard() {
245+
return Positioned(
246+
top: deviceHeight * 0.25,
247+
left: deviceWidth * 0.05,
248+
child: Container(
249+
height: 250,
250+
width: 370,
251+
decoration: BoxDecoration(
252+
color: Colors.red,
253+
borderRadius: BorderRadius.circular(22),
254+
boxShadow: SHADOW,
255+
),
256+
),
257+
);
258+
}
259+
260+
Widget _stackClipperCard() {
261+
return Stack(
262+
children: <Widget>[
263+
_pinkCard(),
264+
_avatarCard(),
265+
_imagesCard()
266+
],
267+
);
268+
}
269+
270+
Widget _cardClipper() {
271+
return ListView(
272+
children: <Widget>[
273+
SizedBox(
274+
height: 100,
275+
),
276+
_stackClipperCard(),
277+
],
278+
);
279+
}
145280
}

0 commit comments

Comments
 (0)