Skip to content

Commit 8d33f94

Browse files
nb312nb312
authored
Merge pull request #2 from nb312/dev
comply the 11th pages of feed group.
2 parents aea9f92 + 0ec1dae commit 8d33f94

File tree

5 files changed

+221
-5
lines changed

5 files changed

+221
-5
lines changed

‎images/feed/feed11-city1.png

673 KB
Loading

‎images/feed/feed11-city2.png

545 KB
Loading

‎images/feed/feed11-header.png

23 KB
Loading

‎lib/page/feed/FeedPageEleven.dart

Lines changed: 215 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,231 @@
44
/// Email: [email protected]
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/const/color_const.dart';
10+
import 'feed_const.dart';
711

812
class FeedPageEleven extends StatefulWidget {
913
@override
1014
_FeedState createState() => _FeedState();
1115
}
1216

13-
class _FeedState extends State<FeedPageEleven> {
17+
class _FeedState extends State<FeedPageEleven>
18+
with SingleTickerProviderStateMixin {
19+
TabController tabController;
20+
var curTab = 0;
21+
22+
void initState() {
23+
super.initState();
24+
tabController = TabController(length: 3, vsync: this);
25+
tabController.addListener(() {
26+
setState(() {
27+
curTab = tabController.index;
28+
});
29+
});
30+
}
31+
32+
Widget _textBack(content, {size = TEXT_SMALL_2_SIZE, isBold = false}) => Text(
33+
content,
34+
style: TextStyle(
35+
fontSize: SizeUtil.getAxisBoth(size),
36+
fontWeight: isBold ? FontWeight.w700 : null),
37+
);
38+
39+
Widget _listItemContent() => Positioned(
40+
bottom: 0.1,
41+
left: SizeUtil.getAxisX(136.0),
42+
child: Container(
43+
decoration: BoxDecoration(
44+
borderRadius: BorderRadius.circular(
45+
SizeUtil.getAxisBoth(22.0),
46+
),
47+
gradient: LinearGradient(colors: [RED_LIGHT, RED]),
48+
),
49+
height: SizeUtil.getAxisY(182.0),
50+
width: SizeUtil.getAxisY(528.0),
51+
child: Stack(
52+
children: <Widget>[
53+
Positioned(
54+
top: SizeUtil.getAxisY(27.0),
55+
left: SizeUtil.getAxisX(87.0),
56+
child: _textBack("Blanche Garcia",
57+
size: TEXT_SMALL_3_SIZE, isBold: true),
58+
),
59+
Positioned(
60+
top: SizeUtil.getAxisY(66.0),
61+
left: SizeUtil.getAxisX(87.0),
62+
child:
63+
_textBack("Netherlands Antilles", size: TEXT_NORMAL_SIZE),
64+
),
65+
Positioned(
66+
top: SizeUtil.getAxisY(27.0),
67+
right: SizeUtil.getAxisX(33.0),
68+
child: _textBack("31 Dec"),
69+
),
70+
Positioned(
71+
bottom: SizeUtil.getAxisY(30.0),
72+
left: SizeUtil.getAxisX(90.0),
73+
child: Container(
74+
alignment: AlignmentDirectional.centerStart,
75+
child: Row(
76+
mainAxisAlignment: MainAxisAlignment.start,
77+
crossAxisAlignment: CrossAxisAlignment.center,
78+
children: <Widget>[
79+
Icon(
80+
Icons.favorite_border,
81+
color: TEXT_BLACK,
82+
size: SizeUtil.getAxisBoth(30.0),
83+
),
84+
SizedBox(
85+
width: SizeUtil.getAxisX(16.0),
86+
),
87+
_textBack("72"),
88+
SizedBox(
89+
width: SizeUtil.getAxisX(45.0),
90+
),
91+
Icon(
92+
Icons.chat,
93+
color: TEXT_BLACK,
94+
size: SizeUtil.getAxisBoth(30.0),
95+
),
96+
SizedBox(
97+
width: SizeUtil.getAxisX(16.0),
98+
),
99+
_textBack("44"),
100+
],
101+
),
102+
),
103+
),
104+
],
105+
),
106+
),
107+
);
108+
109+
Widget _listItem(index) => Container(
110+
alignment: AlignmentDirectional.topStart,
111+
constraints: BoxConstraints.expand(height: SizeUtil.getAxisY(850.0)),
112+
child: Stack(
113+
children: <Widget>[
114+
Container(
115+
alignment: AlignmentDirectional.topStart,
116+
margin: EdgeInsets.only(
117+
top: SizeUtil.getAxisY(45.0),
118+
bottom: SizeUtil.getAxisY(84.0),
119+
left: SizeUtil.getAxisX(30.0),
120+
right: SizeUtil.getAxisX(30.0),
121+
),
122+
child: Image.asset(
123+
index % 2 == 0
124+
? FeedImage.feed11_city1
125+
: FeedImage.feed11_city2,
126+
fit: BoxFit.cover,
127+
),
128+
),
129+
_listItemContent(),
130+
Positioned(
131+
width: SizeUtil.getAxisBoth(100.0),
132+
height: SizeUtil.getAxisBoth(100.0),
133+
bottom: SizeUtil.getAxisY(41.0),
134+
left: SizeUtil.getAxisX(81.0),
135+
child: Image.asset(FeedImage.feed11_header),
136+
),
137+
],
138+
),
139+
);
140+
141+
Widget _listContainer() => Container(
142+
child: ListView.builder(
143+
itemBuilder: (context, index) {
144+
return _listItem(index);
145+
},
146+
itemCount: 4,
147+
padding: EdgeInsets.only(top: 0.1),
148+
),
149+
);
150+
151+
Widget _tabTitleItem(title, isCurrent) => Container(
152+
width: SizeUtil.getAxisX(220.0),
153+
height: SizeUtil.getAxisY(154.0),
154+
alignment: AlignmentDirectional.center,
155+
decoration: BoxDecoration(
156+
gradient: LinearGradient(
157+
colors: isCurrent
158+
? [RED_LIGHT, RED]
159+
: [Color(0x44FFFFFF), Color(0x44FFFFFF)]),
160+
borderRadius: BorderRadius.circular(
161+
SizeUtil.getAxisX(22.0),
162+
),
163+
boxShadow: isCurrent
164+
? [BoxShadow(color: DARK_COLOR, offset: Offset(0.0, 2.0))]
165+
: null),
166+
child: Text(
167+
title,
168+
style: TextStyle(
169+
color: TEXT_BLACK,
170+
fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE),
171+
),
172+
),
173+
);
174+
175+
Widget _tabView(context) {
176+
return DefaultTabController(
177+
length: 3,
178+
child: Column(
179+
children: <Widget>[
180+
Container(
181+
constraints:
182+
BoxConstraints.expand(height: SizeUtil.getAxisY(154.0)),
183+
child: TabBar(
184+
controller: tabController,
185+
tabs: [
186+
_tabTitleItem("Products", curTab == 0),
187+
_tabTitleItem("Recent", curTab == 1),
188+
_tabTitleItem("News", curTab == 2),
189+
],
190+
isScrollable: false,
191+
indicatorWeight: 0.0001,
192+
),
193+
),
194+
Expanded(
195+
child: TabBarView(
196+
children: [
197+
_listContainer(),
198+
_listContainer(),
199+
_listContainer(),
200+
],
201+
controller: tabController,
202+
),
203+
)
204+
],
205+
));
206+
}
207+
14208
@override
15209
Widget build(BuildContext context) {
16210
return Scaffold(
17-
appBar: AppBar(
18-
title: Text("Feed Eleven"),
211+
body: Container(
212+
decoration:
213+
BoxDecoration(gradient: LinearGradient(colors: [YELLOW, GREEN])),
214+
child: Column(
215+
children: <Widget>[
216+
TopTitleBar(),
217+
SizedBox(
218+
height: SizeUtil.getAxisY(43.0),
219+
),
220+
Expanded(
221+
child: _tabView(context),
222+
),
223+
],
224+
),
19225
),
20-
body: Text("Feed page Eleven"),
21226
);
22227
}
228+
229+
@override
230+
void dispose() {
231+
tabController.dispose();
232+
super.dispose();
233+
}
23234
}

‎lib/page/feed/feed_const.dart

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import "package:flutter/material.dart";
66

77
class FeedStringConst {
8-
static const FEED_NAME = "Feed";
8+
static const FEED_NAME = "FEED";
99
}
1010

1111
const CIRCLE_BUTTON_HEIGHT = 87.0;
@@ -16,6 +16,8 @@ const TEXT_LARGE_SIZE = 40.0;
1616
const TEXT_NORMAL_2_SIZE = 28.0;
1717
const TEXT_NORMAL_SIZE = 26.0;
1818
const TEXT_SMALL_SIZE = 20.0;
19+
const TEXT_SMALL_2_SIZE = 22.0;
20+
const TEXT_SMALL_3_SIZE = 24.0;
1921

2022
class FeedImage {
2123
static const IMAGE_PATH = "images/feed";
@@ -24,4 +26,7 @@ class FeedImage {
2426
static const white_back = "$IMAGE_PATH/white_background.png";
2527
static const city = "$IMAGE_PATH/city.png";
2628
static const shop_river = "$IMAGE_PATH/shop_river.png";
29+
static const feed11_city1 = "$IMAGE_PATH/feed11-city1.png";
30+
static const feed11_city2 = "$IMAGE_PATH/feed11-city2.png";
31+
static const feed11_header = "$IMAGE_PATH/feed11-header.png";
2732
}

0 commit comments

Comments
 (0)