Skip to content

Commit 160b8d2

Browse files
Raoun4136Raoun4136
committed
feat(checkpoint): 체크포인트 페이지 1차 구현
- 더미데이터 Data_Task class이용 - Provider 적용해야 할듯 - OverDue, Until Today, Next 구현해야됨
1 parent 9054532 commit 160b8d2

File tree

5 files changed

+500
-86
lines changed

5 files changed

+500
-86
lines changed

‎lib/main.dart

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
33
import 'package:until/service/local_notification.dart';
44
import 'package:until/styles.dart';
55
import 'package:firebase_core/firebase_core.dart';
6+
import 'package:until/view/screen/CheckPointPage.dart';
67
import 'package:until/view/screen/SignupPage.dart';
78
import 'firebase_options.dart';
89

@@ -26,21 +27,22 @@ class MyApp extends StatelessWidget {
2627
debugShowCheckedModeBanner: false,
2728
title: "UNTIL",
2829
theme: ThemeData(
29-
useMaterial3: true,
30-
fontFamily: 'NanumSquareNeo',
31-
colorScheme: ColorScheme.fromSeed(
32-
seedColor: mainColor,
33-
brightness: Brightness.light),
30+
useMaterial3: true,
31+
fontFamily: 'NanumSquareNeo',
32+
colorScheme: ColorScheme.fromSeed(
33+
seedColor: mainColor,
34+
brightness: Brightness.light,
35+
),
3436
),
3537
darkTheme: ThemeData(
36-
useMaterial3: true,
37-
fontFamily: 'NanumSquareNeo',
38-
colorScheme: ColorScheme.fromSeed(
39-
seedColor: mainColor,
40-
brightness: Brightness.dark
41-
)
38+
useMaterial3: true,
39+
fontFamily: 'NanumSquareNeo',
40+
colorScheme: ColorScheme.fromSeed(
41+
seedColor: mainColor,
42+
brightness: Brightness.dark,
43+
),
4244
),
43-
home: const SignupPage(),
45+
home: const CheckPointPage(),
4446
);
4547
}
4648
}

‎lib/styles.dart

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
21
import 'dart:ui' show Color;
32

4-
const mainColor = Color(0xff425c76);
3+
const mainColor = Color(0xff425c76);
4+
const saturdayColor = Color(0xff242d7b);
5+
const sundayColor = Color(0xffba1a1a);

‎lib/view/screen/CheckPointPage.dart

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:until/styles.dart';
3+
import 'package:intl/intl.dart';
4+
import 'package:timelines/timelines.dart';
5+
import 'MainPage.dart';
6+
7+
class Data_Task {
8+
String name;
9+
DateTime startDate;
10+
DateTime endDate;
11+
List<String> tags;
12+
List<CheckPoint> checkPoints;
13+
bool imminent;
14+
15+
Data_Task(this.name, this.startDate, this.endDate, this.tags,
16+
this.checkPoints, this.imminent);
17+
}
18+
19+
class CheckPoint {
20+
String name;
21+
bool isFinished;
22+
bool isDelayed;
23+
DateTime untilDate;
24+
25+
CheckPoint(this.name, this.isFinished, this.isDelayed, this.untilDate);
26+
}
27+
28+
final List<Data_Task> data = [
29+
Data_Task(
30+
'캡스톤 디자인',
31+
DateTime(2022, 9, 1),
32+
DateTime(2022, 12, 25),
33+
['팀 프로젝트', '앱 개발'],
34+
[
35+
CheckPoint('프론트', true, false, DateTime(2022, 10, 11)),
36+
CheckPoint('서버', false, true, DateTime(2022, 12, 13)),
37+
CheckPoint('연동', false, true, DateTime(2022, 12, 21))
38+
],
39+
true,
40+
),
41+
Data_Task(
42+
'모바일 앱 개발',
43+
DateTime(2022, 10, 2),
44+
DateTime(2022, 12, 20),
45+
['팀 프로젝트', '앱 개발'],
46+
[
47+
CheckPoint('기획', true, true, DateTime(2022, 10, 03)),
48+
CheckPoint('디자인', true, false, DateTime(2022, 11, 28)),
49+
CheckPoint('앱만들기', false, true, DateTime(2022, 12, 12))
50+
],
51+
true,
52+
),
53+
Data_Task(
54+
'최종 보고서',
55+
DateTime(2022, 12, 13),
56+
DateTime(2022, 12, 31),
57+
['리포트', '발표'],
58+
[
59+
CheckPoint('서론', false, false, DateTime(2022, 12, 14)),
60+
CheckPoint('본론', false, false, DateTime(2022, 12, 20)),
61+
CheckPoint('결론', false, false, DateTime(2022, 12, 27))
62+
],
63+
false,
64+
),
65+
];
66+
67+
const int data_index = 0;
68+
69+
class CheckPointPage extends StatefulWidget {
70+
const CheckPointPage({super.key});
71+
72+
@override
73+
State<CheckPointPage> createState() => _CheckPointPageState();
74+
}
75+
76+
class _CheckPointPageState extends State<CheckPointPage> {
77+
@override
78+
Widget build(BuildContext context) {
79+
return Scaffold(
80+
appBar: AppBar(
81+
centerTitle: true,
82+
title: const Text('TODAY'),
83+
actions: [
84+
IconButton(
85+
onPressed: () {
86+
Navigator.push(
87+
context,
88+
MaterialPageRoute(
89+
builder: (context) => const MainPage(),
90+
),
91+
);
92+
},
93+
icon: const Icon(Icons.add),
94+
),
95+
],
96+
),
97+
body: Container(
98+
child: Column(
99+
children: const [
100+
Progress(),
101+
CheckPointsList(),
102+
],
103+
),
104+
),
105+
);
106+
}
107+
}
108+
109+
class Progress extends StatefulWidget {
110+
const Progress({super.key});
111+
112+
@override
113+
State<Progress> createState() => _ProgressState();
114+
}
115+
116+
class _ProgressState extends State<Progress> {
117+
@override
118+
Widget build(BuildContext context) {
119+
return Container(
120+
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 0),
121+
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
122+
height: 120,
123+
decoration: BoxDecoration(
124+
border: Border.all(
125+
color: data[data_index].imminent ? sundayColor : Colors.black,
126+
width: 1),
127+
borderRadius: BorderRadius.circular(20),
128+
color: Colors.white,
129+
),
130+
child: Column(
131+
crossAxisAlignment: CrossAxisAlignment.start,
132+
children: [
133+
Padding(
134+
padding: const EdgeInsets.symmetric(
135+
vertical: 2,
136+
), //apply padding to all four sides
137+
child: Text(
138+
'${DateFormat('MMMM dd').format(data[data_index].startDate)} ~ ${DateFormat('MMMM dd').format(data[data_index].endDate)}',
139+
style: const TextStyle(color: saturdayColor),
140+
),
141+
),
142+
Padding(
143+
padding: const EdgeInsets.symmetric(
144+
vertical: 2), //apply padding to all four sides
145+
child: Text(
146+
data[data_index].name,
147+
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
148+
),
149+
),
150+
Padding(
151+
padding: const EdgeInsets.symmetric(
152+
vertical: 2), //apply padding to all four sides
153+
child: SizedBox(
154+
height: 20,
155+
child: ListView.builder(
156+
scrollDirection: Axis.horizontal,
157+
itemCount: data[data_index].tags.length,
158+
itemBuilder: (BuildContext context, int indexTag) {
159+
return Text(
160+
'#${data[data_index].tags[indexTag]} ',
161+
style: const TextStyle(color: Colors.black54, fontSize: 12),
162+
);
163+
},
164+
),
165+
),
166+
),
167+
Padding(
168+
padding: const EdgeInsets.symmetric(
169+
vertical: 2), //apply padding to all four sides
170+
child: Row(
171+
mainAxisAlignment: MainAxisAlignment.end,
172+
children: [
173+
SizedBox(
174+
height: 10,
175+
child: ListView.separated(
176+
shrinkWrap: true,
177+
scrollDirection: Axis.horizontal,
178+
separatorBuilder: (BuildContext context, int index) {
179+
return const SizedBox(
180+
height: 5,
181+
);
182+
},
183+
itemCount: data[data_index].checkPoints.length,
184+
itemBuilder: (BuildContext context, int indexPoint) {
185+
return Padding(
186+
padding: const EdgeInsets.symmetric(horizontal: 10),
187+
child:
188+
Point(data[data_index].checkPoints[indexPoint]));
189+
},
190+
),
191+
),
192+
],
193+
),
194+
),
195+
],
196+
),
197+
);
198+
}
199+
}
200+
201+
Widget Point(CheckPoint checkPoint) => Container(
202+
width: 10.0,
203+
height: 10.0,
204+
decoration: BoxDecoration(
205+
color: checkPoint.isFinished
206+
? (checkPoint.isDelayed ? sundayColor : saturdayColor)
207+
: null,
208+
shape: BoxShape.circle,
209+
border: Border.all(
210+
color: checkPoint.isDelayed ? sundayColor : saturdayColor,
211+
width: 2),
212+
),
213+
);
214+
215+
class CheckPointsList extends StatefulWidget {
216+
const CheckPointsList({super.key});
217+
218+
@override
219+
State<CheckPointsList> createState() => _CheckPointsListState();
220+
}
221+
222+
class _CheckPointsListState extends State<CheckPointsList> {
223+
@override
224+
Widget build(BuildContext context) {
225+
return const CheckPoints();
226+
}
227+
}
228+
229+
class CheckPoints extends StatefulWidget {
230+
const CheckPoints({super.key});
231+
232+
@override
233+
State<CheckPoints> createState() => _CheckPointsState();
234+
}
235+
236+
class _CheckPointsState extends State<CheckPoints> {
237+
@override
238+
Widget build(BuildContext context) {
239+
return Flexible(
240+
fit: FlexFit.tight,
241+
child: Timeline.tileBuilder(
242+
theme: TimelineThemeData(
243+
connectorTheme: const ConnectorThemeData(
244+
color: Colors.black26,
245+
thickness: 2.5,
246+
),
247+
indicatorTheme: const IndicatorThemeData(
248+
color: mainColor,
249+
),
250+
),
251+
builder: TimelineTileBuilder.connected(
252+
contentsBuilder: (context, index) => Padding(
253+
padding: const EdgeInsets.symmetric(
254+
horizontal: 10,
255+
vertical: 12,
256+
),
257+
child: SizedBox(
258+
width: double.infinity,
259+
child: Container(
260+
margin: const EdgeInsets.only(
261+
left: 10,
262+
right: 30,
263+
),
264+
padding: const EdgeInsets.symmetric(
265+
horizontal: 25,
266+
vertical: 17,
267+
),
268+
height: 100,
269+
decoration: BoxDecoration(
270+
border: Border.all(
271+
color: data[data_index].checkPoints[index].isFinished
272+
? Colors.black12
273+
: mainColor,
274+
width: 2),
275+
borderRadius: BorderRadius.circular(15),
276+
color: Colors.white,
277+
),
278+
child: InkWell(
279+
onTap: () {
280+
setState(
281+
() {
282+
data[data_index].checkPoints[index].isFinished =
283+
!data[data_index].checkPoints[index].isFinished;
284+
},
285+
);
286+
},
287+
child: SizedBox(
288+
child: Column(
289+
crossAxisAlignment: CrossAxisAlignment.stretch,
290+
children: [
291+
Text(
292+
data[data_index].checkPoints[index].name,
293+
style: const TextStyle(
294+
color: Colors.black87,
295+
fontSize: 16,
296+
fontWeight: FontWeight.bold,
297+
),
298+
),
299+
Text(
300+
'Until ${DateFormat('MMMM dd').format(data[data_index].checkPoints[index].untilDate)}',
301+
style: const TextStyle(
302+
color: mainColor,
303+
),
304+
),
305+
data[data_index].checkPoints[index].isFinished
306+
? const Padding(
307+
padding: EdgeInsets.only(top: 5),
308+
child: Text("finished",
309+
textAlign: TextAlign.end,
310+
style: TextStyle(
311+
color: Colors.black38,
312+
)))
313+
: const Text("")
314+
],
315+
),
316+
),
317+
),
318+
),
319+
),
320+
),
321+
connectorBuilder: (context, index, type) =>
322+
const SolidLineConnector(),
323+
nodePositionBuilder: (context, index) => 0.12,
324+
indicatorBuilder: (context, index) {
325+
{
326+
switch (data[data_index].checkPoints[index].isFinished) {
327+
case true:
328+
return const DotIndicator(
329+
color: mainColor,
330+
);
331+
default:
332+
return const OutlinedDotIndicator(
333+
color: mainColor,
334+
);
335+
}
336+
}
337+
},
338+
itemCount: data[data_index].checkPoints.length,
339+
),
340+
),
341+
);
342+
}
343+
}

0 commit comments

Comments
 (0)