Skip to content

Commit f4ebe50

Browse files
MikkyBoy357MikkyBoy357
authored
Merge pull request bukunmialuko#32 from bukunmialuko/mobile26
mobile page26 done
2 parents 2a851c6 + 2566bda commit f4ebe50

File tree

8 files changed

+393
-1
lines changed

8 files changed

+393
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ flutter build apk
5555

5656
| Page 25 | Page 26 | Page 27 | Page 28 |
5757
| ------------- | ------------- | ------------- | ------------- |
58-
| <img src="art/screenshots/page_25.png" width="200"/> | | <img src="art/screenshots/page_27.png" width="200"/> | |
58+
| <img src="art/screenshots/page_25.png" width="200"/> | <img src="art/screenshots/page_26.png" width="200"/> | <img src="art/screenshots/page_27.png" width="200"/> | |
5959

6060
| Page 29 | Page 30 | Page 31 | Page 32 |
6161
| ------------- | ------------- | ------------- | ------------- |

‎art/screenshots/page_26.png

169 KB
Loading

‎assets/png/26/start.png

28.5 KB
Loading

‎lib/src/mobile_ui/26/page26.dart

Lines changed: 376 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,376 @@
1+
import 'package:flutter/cupertino.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_screenutil/flutter_screenutil.dart';
4+
import 'package:flutter_svg/svg.dart';
5+
import 'package:get_it/get_it.dart';
6+
import 'package:google_fonts/google_fonts.dart';
7+
import '../../../res/asset_images.dart';
8+
import '../../navigation/navigation_service.dart';
9+
10+
class Page26 extends StatefulWidget {
11+
const Page26({Key? key}) : super(key: key);
12+
13+
@override
14+
State<Page26> createState() => _Page26State();
15+
}
16+
17+
class _Page26State extends State<Page26> {
18+
@override
19+
Widget build(BuildContext context) {
20+
Size size = MediaQuery.of(context).size;
21+
22+
return Scaffold(
23+
body: SafeArea(
24+
child: SingleChildScrollView(
25+
child: Column(
26+
crossAxisAlignment: CrossAxisAlignment.start,
27+
children: [
28+
Padding(
29+
padding: const EdgeInsets.symmetric(horizontal: 20.0),
30+
child: Row(
31+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
32+
crossAxisAlignment: CrossAxisAlignment.start,
33+
children: [
34+
Column(
35+
crossAxisAlignment: CrossAxisAlignment.start,
36+
children: [
37+
Text(
38+
'Challenges',
39+
style: TextStyle(
40+
fontSize: 28.sp,
41+
fontWeight: FontWeight.w600,
42+
fontFamily: GoogleFonts.workSans().fontFamily,
43+
),
44+
),
45+
Row(
46+
children: [
47+
Text(
48+
'June 2021',
49+
style: TextStyle(
50+
fontSize: 18.sp,
51+
fontFamily: GoogleFonts.workSans().fontFamily,
52+
),
53+
),
54+
IconButton(
55+
onPressed: () {},
56+
icon: Icon(CupertinoIcons.chevron_down),
57+
),
58+
],
59+
),
60+
],
61+
),
62+
GestureDetector(
63+
onTap: () {
64+
GetIt.I.get<NavigationService>().back();
65+
},
66+
child: Container(
67+
height: 40.h,
68+
width: 40.h,
69+
decoration: BoxDecoration(
70+
color: Colors.grey,
71+
borderRadius: BorderRadius.circular(10),
72+
),
73+
),
74+
),
75+
],
76+
),
77+
),
78+
SizedBox(
79+
height: 13.h,
80+
),
81+
Image.asset('assets/png/26/start.png'),
82+
Padding(
83+
padding: const EdgeInsets.only(left: 20.0),
84+
child: Text(
85+
'Group tasks',
86+
style: TextStyle(
87+
fontSize: 20.sp,
88+
fontWeight: FontWeight.w600,
89+
),
90+
),
91+
),
92+
SizedBox(
93+
height: 20.h,
94+
),
95+
Container(
96+
height: 180.h,
97+
width: size.width,
98+
child: SingleChildScrollView(
99+
scrollDirection: Axis.horizontal,
100+
child: Row(
101+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
102+
crossAxisAlignment: CrossAxisAlignment.center,
103+
children: [
104+
SizedBox(width: 20),
105+
ListView.separated(
106+
itemCount: 5,
107+
shrinkWrap: true,
108+
scrollDirection: Axis.horizontal,
109+
physics: NeverScrollableScrollPhysics(),
110+
separatorBuilder: (context, index) {
111+
return SizedBox(width: 10);
112+
},
113+
itemBuilder: (context, index) {
114+
return GroupTaskCard();
115+
},
116+
),
117+
SizedBox(width: 20),
118+
],
119+
),
120+
),
121+
),
122+
SizedBox(width: 20.w),
123+
],
124+
),
125+
),
126+
),
127+
bottomNavigationBar: Container(
128+
height: 90.h,
129+
decoration: BoxDecoration(
130+
color: Colors.white,
131+
border: Border.all(color: const Color(0xffE0E0E0))),
132+
child: Center(
133+
child: Padding(
134+
padding: EdgeInsets.only(left: 54.w, right: 54.w),
135+
child: Row(
136+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
137+
crossAxisAlignment: CrossAxisAlignment.center,
138+
children: [
139+
SvgPicture.asset(
140+
Assets.PG6_MOTION_PHOTOS_PAUSE,
141+
height: 24.r,
142+
width: 24.r,
143+
fit: BoxFit.fill,
144+
),
145+
SvgPicture.asset(
146+
Assets.PG6_CAST_CONNECTED,
147+
height: 24.r,
148+
width: 24.r,
149+
fit: BoxFit.fill,
150+
),
151+
SvgPicture.asset(
152+
Assets.PG6_DEBUG,
153+
height: 24.r,
154+
width: 24.r,
155+
fit: BoxFit.fill,
156+
),
157+
SvgPicture.asset(
158+
Assets.PG6_CONTACT,
159+
height: 24.r,
160+
width: 24.r,
161+
fit: BoxFit.fill,
162+
),
163+
],
164+
),
165+
),
166+
),
167+
),
168+
);
169+
}
170+
}
171+
172+
class GroupTaskCard extends StatelessWidget {
173+
const GroupTaskCard({
174+
Key? key,
175+
}) : super(key: key);
176+
177+
@override
178+
Widget build(BuildContext context) {
179+
return Card(
180+
shape: RoundedRectangleBorder(
181+
borderRadius: BorderRadius.circular(16.r),
182+
),
183+
child: Container(
184+
// height: 170.h,
185+
width: 130.w,
186+
decoration: BoxDecoration(
187+
color: Color(0xFFF4F4F4),
188+
borderRadius: BorderRadius.circular(16.r),
189+
boxShadow: [
190+
BoxShadow(
191+
color: Colors.grey.withOpacity(0.5),
192+
spreadRadius: 0.5,
193+
blurRadius: 2,
194+
offset: const Offset(0, 0),
195+
),
196+
],
197+
),
198+
padding: EdgeInsets.all(10),
199+
child: Column(
200+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
201+
children: [
202+
SizedBox(height: 5.h),
203+
Container(
204+
width: 100.w,
205+
child: Stack(
206+
children: [
207+
CircleAvatar(
208+
radius: 20.r,
209+
backgroundImage: AssetImage(
210+
'assets/png/flower.png',
211+
),
212+
),
213+
Positioned(
214+
left: 20,
215+
child: CircleAvatar(
216+
radius: 20.r,
217+
backgroundImage: AssetImage(
218+
'assets/png/lady_pg4.png',
219+
),
220+
),
221+
),
222+
Positioned(
223+
left: 40,
224+
child: CircleAvatar(
225+
radius: 20.r,
226+
backgroundImage: AssetImage(
227+
'assets/png/flower.png',
228+
),
229+
),
230+
),
231+
Positioned(
232+
left: 60,
233+
child: CircleAvatar(
234+
radius: 20.r,
235+
backgroundImage: AssetImage(
236+
'assets/png/lady_pg4.png',
237+
),
238+
),
239+
),
240+
],
241+
),
242+
),
243+
Text(
244+
'Boxing in central park gym',
245+
textAlign: TextAlign.center,
246+
style: TextStyle(
247+
fontSize: 12,
248+
),
249+
),
250+
SizedBox(height: 20.h),
251+
Container(
252+
height: 32.h,
253+
width: 85.w,
254+
decoration: BoxDecoration(
255+
color: Color(0xFF262626),
256+
borderRadius: BorderRadius.circular(50.r),
257+
),
258+
child: Center(
259+
child: Row(
260+
mainAxisAlignment: MainAxisAlignment.center,
261+
children: [
262+
Text(
263+
'Detail',
264+
style: TextStyle(
265+
color: Colors.white,
266+
),
267+
),
268+
SizedBox(width: 3.w),
269+
Icon(
270+
Icons.arrow_right,
271+
color: Colors.white,
272+
),
273+
],
274+
),
275+
),
276+
),
277+
],
278+
),
279+
),
280+
);
281+
}
282+
}
283+
284+
class GoalCard extends StatelessWidget {
285+
final int goalNumber;
286+
287+
const GoalCard({
288+
Key? key,
289+
required this.goalNumber,
290+
}) : super(key: key);
291+
292+
@override
293+
Widget build(BuildContext context) {
294+
return Container(
295+
width: 100,
296+
// height: 100,
297+
padding: EdgeInsets.all(25.w),
298+
margin: EdgeInsets.symmetric(horizontal: 20),
299+
decoration: BoxDecoration(
300+
color: Color(0xFFF4F4F4),
301+
borderRadius: BorderRadius.circular(16),
302+
boxShadow: [
303+
BoxShadow(
304+
color: Colors.grey.withOpacity(0.5),
305+
spreadRadius: 1,
306+
blurRadius: 2,
307+
offset: Offset(0, 0), // changes position of shadow
308+
),
309+
],
310+
),
311+
child: Row(
312+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
313+
children: [
314+
CircleAvatar(
315+
radius: 30.r,
316+
backgroundColor: Colors.grey,
317+
),
318+
Column(
319+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
320+
crossAxisAlignment: CrossAxisAlignment.start,
321+
children: [
322+
Text(
323+
'Goals #$goalNumber',
324+
style: TextStyle(
325+
fontSize: 20.sp,
326+
fontWeight: FontWeight.w500,
327+
fontFamily: GoogleFonts.workSans().fontFamily,
328+
),
329+
),
330+
SizedBox(height: 10.h),
331+
Row(
332+
children: [
333+
Container(
334+
height: 5,
335+
width: 100,
336+
decoration: BoxDecoration(
337+
color: Colors.grey,
338+
borderRadius: BorderRadius.circular(5),
339+
),
340+
child: Row(
341+
children: [
342+
Container(
343+
height: 5,
344+
width: 20,
345+
decoration: BoxDecoration(
346+
color: Colors.black,
347+
borderRadius: BorderRadius.circular(5),
348+
),
349+
),
350+
],
351+
),
352+
),
353+
SizedBox(width: 10),
354+
Text(
355+
'20% completed',
356+
style: TextStyle(
357+
fontSize: 10.sp,
358+
fontFamily: GoogleFonts.workSans().fontFamily,
359+
),
360+
),
361+
],
362+
),
363+
],
364+
),
365+
Column(
366+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
367+
children: [
368+
Icon(Icons.more_vert),
369+
Icon(Icons.more_vert, color: Colors.transparent),
370+
],
371+
)
372+
],
373+
),
374+
);
375+
}
376+
}

0 commit comments

Comments
 (0)