2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
고원빈
ebbff5a8 1 parent 7c70c14d

[frontend] Inside Outside Page 구현

Inline Side-by-side
Showing 11 changed files with 528 additions and 25 deletions
1 +{
2 + "dart.previewFlutterUiGuides": true
3 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -27,3 +27,7 @@ appbar 관련 디자인은 추후 구현 예정 ...@@ -27,3 +27,7 @@ appbar 관련 디자인은 추후 구현 예정
27 ### 2021-05-10 27 ### 2021-05-10
28 + Appbar 디자인 변경 및 Navgation Bar 구현 28 + Appbar 디자인 변경 및 Navgation Bar 구현
29 + Setting은 별도의 페이지로 구성 29 + Setting은 별도의 페이지로 구성
30 +
31 +### 2021-05-11
32 ++ Inside Information 화면 구성
33 ++ Outside Information 화면 구성
......
...@@ -31,7 +31,7 @@ class _DashBoardState extends State<DashBoard> { ...@@ -31,7 +31,7 @@ class _DashBoardState extends State<DashBoard> {
31 iconTheme: IconThemeData(color: Colors.black), 31 iconTheme: IconThemeData(color: Colors.black),
32 backgroundColor: Colors.white, 32 backgroundColor: Colors.white,
33 title: Text( 33 title: Text(
34 - 'Medicine Box', 34 + 'Smart Medicine Box',
35 style: TextStyle( 35 style: TextStyle(
36 color: Colors.black, 36 color: Colors.black,
37 fontSize: 20, 37 fontSize: 20,
...@@ -87,10 +87,10 @@ class _DashBoardState extends State<DashBoard> { ...@@ -87,10 +87,10 @@ class _DashBoardState extends State<DashBoard> {
87 }) 87 })
88 }, 88 },
89 items: [ 89 items: [
90 - BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Inner'), 90 + BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'In'),
91 BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), 91 BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
92 BottomNavigationBarItem( 92 BottomNavigationBarItem(
93 - label: 'Outer', 93 + label: 'Out',
94 icon: Icon(Icons.favorite), 94 icon: Icon(Icons.favorite),
95 ) 95 )
96 ], 96 ],
...@@ -115,39 +115,79 @@ Widget mainpage(BuildContext context) { ...@@ -115,39 +115,79 @@ Widget mainpage(BuildContext context) {
115 약 제조사 115 약 제조사
116 */ 116 */
117 return Scaffold( 117 return Scaffold(
118 - backgroundColor: Color(0xffe5f4ff), 118 + backgroundColor: Colors.white,
119 body: Container( 119 body: Container(
120 height: size.height * 0.6, 120 height: size.height * 0.6,
121 margin: EdgeInsets.fromLTRB(0, 30, 0, 0), 121 margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
122 padding: EdgeInsets.fromLTRB(5, 0, 5, 5), 122 padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
123 - decoration: BoxDecoration(
124 - border: Border.all(),
125 - borderRadius: BorderRadius.all(
126 - Radius.circular(4.0) // <--- border radius here
127 - ),
128 - ),
129 child: Column( 123 child: Column(
130 crossAxisAlignment: CrossAxisAlignment.center, 124 crossAxisAlignment: CrossAxisAlignment.center,
131 children: <Widget>[ 125 children: <Widget>[
132 Container( 126 Container(
127 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
133 margin: EdgeInsets.fromLTRB(0, 30, 0, 0), 128 margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
134 - height: size.height * 0.1, 129 + height: size.height * 0.15,
130 + width: size.width,
135 decoration: BoxDecoration( 131 decoration: BoxDecoration(
136 border: Border.all(), 132 border: Border.all(),
137 borderRadius: BorderRadius.all( 133 borderRadius: BorderRadius.all(
138 Radius.circular(4.0) // <--- border radius here 134 Radius.circular(4.0) // <--- border radius here
139 ), 135 ),
140 ), 136 ),
137 + child: new Column(
138 + crossAxisAlignment: CrossAxisAlignment.start,
139 + children: [
140 + Text(
141 + '약 이름:',
142 + style: TextStyle(
143 + color: Colors.black,
144 + fontSize: 24,
145 + fontFamily: 'NotoSansKR',
146 + fontWeight: FontWeight.w700),
147 + ),
148 + Text(
149 + '무슨 무슨 비타민 ',
150 + style: TextStyle(
151 + color: Colors.black,
152 + fontSize: 36,
153 + fontFamily: 'NotoSansKR',
154 + fontWeight: FontWeight.w700),
155 + ),
156 + ],
157 + ),
141 ), 158 ),
142 Container( 159 Container(
160 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
143 margin: EdgeInsets.fromLTRB(0, 30, 0, 0), 161 margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
144 - height: size.height * 0.1, 162 + height: size.height * 0.15,
163 + width: size.width,
145 decoration: BoxDecoration( 164 decoration: BoxDecoration(
146 border: Border.all(), 165 border: Border.all(),
147 borderRadius: BorderRadius.all( 166 borderRadius: BorderRadius.all(
148 Radius.circular(4.0) // <--- border radius here 167 Radius.circular(4.0) // <--- border radius here
149 ), 168 ),
150 ), 169 ),
170 + child: new Column(
171 + crossAxisAlignment: CrossAxisAlignment.start,
172 + children: [
173 + Text(
174 + '약 제조사:',
175 + style: TextStyle(
176 + color: Colors.black,
177 + fontSize: 24,
178 + fontFamily: 'NotoSansKR',
179 + fontWeight: FontWeight.w700),
180 + ),
181 + Text(
182 + 'Test123',
183 + style: TextStyle(
184 + color: Colors.black,
185 + fontSize: 32,
186 + fontFamily: 'NotoSansKR',
187 + fontWeight: FontWeight.w700),
188 + ),
189 + ],
190 + ),
151 ), 191 ),
152 ], 192 ],
153 ), 193 ),
...@@ -156,25 +196,468 @@ Widget mainpage(BuildContext context) { ...@@ -156,25 +196,468 @@ Widget mainpage(BuildContext context) {
156 } 196 }
157 197
158 Widget ineerInformationpage(BuildContext context) { 198 Widget ineerInformationpage(BuildContext context) {
159 - /* 199 + final Size size = MediaQuery.of(context).size;
160 - 약병 내부 정보 화면
161 - 약병 내부 온도 약병 내부 습도 약병 내부 현황 최근 계폐 시간 을 표시
162 - 맨처음 Inside Information 출력
163 -
164 - 이거 고민이 그냥 저기에 있는 대로 할것인지 아니면 appbar를 저렇게 할 것인지
165 -
166 - 저거는 container을 잘 성정 하고 text를 설정 해야 할 듯
167 -
168 -
169 - */
170 return Scaffold( 200 return Scaffold(
171 backgroundColor: Colors.white, 201 backgroundColor: Colors.white,
202 + body: Container(
203 + height: size.height * 0.9,
204 + margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
205 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
206 + child: Column(
207 + crossAxisAlignment: CrossAxisAlignment.center,
208 + children: <Widget>[
209 + Container(
210 + padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
211 + height: size.height * 0.08,
212 + width: size.width,
213 + child: Center(
214 + child: Text(
215 + 'Inside Information',
216 + textAlign: TextAlign.center,
217 + textScaleFactor: 1.0,
218 + style: TextStyle(
219 + color: Colors.black,
220 + fontSize: 32,
221 + fontFamily: 'NotoSansKR',
222 + fontWeight: FontWeight.w700),
223 + ),
224 + ),
225 + ),
226 + Container(
227 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
228 + margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
229 + height: size.height * 0.25,
230 + width: size.width,
231 + child: Column(
232 + children: <Widget>[
233 + Flexible(
234 + child: Row(
235 + mainAxisAlignment: MainAxisAlignment.center,
236 + children: <Widget>[
237 + Container(
238 + width: size.width * 0.43,
239 + height: size.width * 0.43,
240 + margin: const EdgeInsets.all(5.0),
241 + padding: const EdgeInsets.fromLTRB(10, 5, 10, 10),
242 + decoration: BoxDecoration(
243 + color: Color(0xff8E97FD),
244 + borderRadius: BorderRadius.circular(10.0),
245 + ),
246 + child: Column(
247 + children: [
248 + Container(
249 + width: size.width,
250 + height: size.height * 0.05,
251 + child: Center(
252 + child: Text(
253 + '약병 내부 온도',
254 + textAlign: TextAlign.center,
255 + textScaleFactor: 1.0,
256 + style: TextStyle(
257 + color: Colors.white,
258 + fontSize: 24,
259 + fontFamily: 'NotoSansKR',
260 + fontWeight: FontWeight.w800),
261 + ),
262 + ),
263 + ),
264 + Container(
265 + width: size.width,
266 + height: size.height * 0.14,
267 + child: Center(
268 + child: Row(
269 + mainAxisAlignment: MainAxisAlignment.center,
270 + children: [
271 + Text(
272 + '14',
273 + textAlign: TextAlign.center,
274 + textScaleFactor: 1.0,
275 + style: TextStyle(
276 + color: Colors.white,
277 + fontSize: 80,
278 + fontFamily: 'NotoSansKR',
279 + fontWeight: FontWeight.w800),
280 + ),
281 + Text(
282 + '℃',
283 + textAlign: TextAlign.center,
284 + textScaleFactor: 1.0,
285 + style: TextStyle(
286 + color: Colors.white,
287 + fontSize: 60,
288 + fontFamily: 'NotoSansKR',
289 + fontWeight: FontWeight.w800),
290 + )
291 + ],
292 + ),
293 + ),
294 + ),
295 + ],
296 + ),
297 + ),
298 + Container(
299 + width: size.width * 0.43,
300 + height: size.width * 0.43,
301 + margin: const EdgeInsets.all(5.0),
302 + padding: const EdgeInsets.fromLTRB(10, 5, 10, 10),
303 + decoration: BoxDecoration(
304 + color: Color(0xff8E97FD),
305 + borderRadius: BorderRadius.circular(10.0),
306 + ),
307 + child: Column(
308 + children: [
309 + Container(
310 + width: size.width,
311 + height: size.height * 0.05,
312 + child: Center(
313 + child: Text(
314 + '약병 내부 습도',
315 + textAlign: TextAlign.center,
316 + textScaleFactor: 1.0,
317 + style: TextStyle(
318 + color: Colors.white,
319 + fontSize: 24,
320 + fontFamily: 'NotoSansKR',
321 + fontWeight: FontWeight.w800),
322 + ),
323 + ),
324 + ),
325 + Container(
326 + width: size.width,
327 + height: size.height * 0.14,
328 + child: Center(
329 + child: Row(
330 + mainAxisAlignment: MainAxisAlignment.center,
331 + children: [
332 + Text(
333 + '57',
334 + textAlign: TextAlign.center,
335 + textScaleFactor: 1.0,
336 + style: TextStyle(
337 + color: Colors.white,
338 + fontSize: 80,
339 + fontFamily: 'NotoSansKR',
340 + fontWeight: FontWeight.w800),
341 + ),
342 + Text(
343 + '%',
344 + textAlign: TextAlign.center,
345 + textScaleFactor: 1.0,
346 + style: TextStyle(
347 + color: Colors.white,
348 + fontSize: 60,
349 + fontFamily: 'NotoSansKR',
350 + fontWeight: FontWeight.w800),
351 + )
352 + ],
353 + ),
354 + ),
355 + ),
356 + ],
357 + ),
358 + ),
359 + ],
360 + ),
361 + ),
362 + ],
363 + ),
364 + ),
365 + Container(
366 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
367 + margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
368 + height: size.height * 0.3,
369 + width: size.width,
370 + child: Column(
371 + children: <Widget>[
372 + Flexible(
373 + child: Row(
374 + mainAxisAlignment: MainAxisAlignment.center,
375 + children: <Widget>[
376 + Container(
377 + width: size.width * 0.43,
378 + height: size.width * 0.43,
379 + margin: const EdgeInsets.all(5.0),
380 + padding: const EdgeInsets.fromLTRB(10, 5, 10, 10),
381 + decoration: BoxDecoration(
382 + color: Color(0xff8E97FD),
383 + borderRadius: BorderRadius.circular(10.0),
384 + ),
385 + child: Column(
386 + children: [
387 + Container(
388 + width: size.width,
389 + height: size.height * 0.05,
390 + child: Center(
391 + child: Text(
392 + '약병 내부 잔량',
393 + textAlign: TextAlign.center,
394 + textScaleFactor: 1.0,
395 + style: TextStyle(
396 + color: Colors.white,
397 + fontSize: 24,
398 + fontFamily: 'NotoSansKR',
399 + fontWeight: FontWeight.w800),
400 + ),
401 + ),
402 + ),
403 + Container(
404 + width: size.width,
405 + height: size.height * 0.14,
406 + child: Center(
407 + child: Row(
408 + mainAxisAlignment: MainAxisAlignment.center,
409 + children: [
410 + Text(
411 + '57',
412 + textAlign: TextAlign.center,
413 + textScaleFactor: 1.0,
414 + style: TextStyle(
415 + color: Colors.white,
416 + fontSize: 80,
417 + fontFamily: 'NotoSansKR',
418 + fontWeight: FontWeight.w800),
419 + ),
420 + Text(
421 + '%',
422 + textAlign: TextAlign.center,
423 + textScaleFactor: 1.0,
424 + style: TextStyle(
425 + color: Colors.white,
426 + fontSize: 60,
427 + fontFamily: 'NotoSansKR',
428 + fontWeight: FontWeight.w800),
429 + )
430 + ],
431 + ),
432 + ),
433 + ),
434 + ],
435 + ),
436 + ),
437 + Container(
438 + width: size.width * 0.43,
439 + height: size.width * 0.43,
440 + margin: const EdgeInsets.all(5.0),
441 + padding: const EdgeInsets.fromLTRB(10, 5, 10, 10),
442 + decoration: BoxDecoration(
443 + color: Color(0xff8E97FD),
444 + borderRadius: BorderRadius.circular(10.0),
445 + ),
446 + child: Column(
447 + children: [
448 + Container(
449 + width: size.width,
450 + height: size.height * 0.05,
451 + child: Center(
452 + child: Text(
453 + '최근 개폐 시간',
454 + textAlign: TextAlign.center,
455 + textScaleFactor: 1.0,
456 + style: TextStyle(
457 + color: Colors.white,
458 + fontSize: 24,
459 + fontFamily: 'NotoSansKR',
460 + fontWeight: FontWeight.w800),
461 + ),
462 + ),
463 + ),
464 + Container(
465 + width: size.width,
466 + height: size.height * 0.14,
467 + child: Center(
468 + child: Text(
469 + '15:57',
470 + textAlign: TextAlign.center,
471 + textScaleFactor: 1.0,
472 + style: TextStyle(
473 + color: Colors.white,
474 + fontSize: 60,
475 + fontFamily: 'NotoSansKR',
476 + fontWeight: FontWeight.w800),
477 + ),
478 + ),
479 + ),
480 + ],
481 + ),
482 + ),
483 + ],
484 + ),
485 + ),
486 + ],
487 + ),
488 + ),
489 + ],
490 + ),
491 + ),
172 ); 492 );
173 } 493 }
174 494
175 Widget outerInformationpage(BuildContext context) { 495 Widget outerInformationpage(BuildContext context) {
496 + final Size size = MediaQuery.of(context).size;
176 return Scaffold( 497 return Scaffold(
177 - backgroundColor: Colors.blue, 498 + backgroundColor: Colors.white,
499 + body: Container(
500 + height: size.height * 0.9,
501 + margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
502 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
503 + child: Column(
504 + crossAxisAlignment: CrossAxisAlignment.center,
505 + children: <Widget>[
506 + Container(
507 + padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
508 + height: size.height * 0.08,
509 + width: size.width,
510 + child: Center(
511 + child: Text(
512 + 'Outside Information',
513 + textAlign: TextAlign.center,
514 + textScaleFactor: 1.0,
515 + style: TextStyle(
516 + color: Colors.black,
517 + fontSize: 32,
518 + fontFamily: 'NotoSansKR',
519 + fontWeight: FontWeight.w700),
520 + ),
521 + ),
522 + ),
523 + Container(
524 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
525 + margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
526 + height: size.height * 0.20,
527 + width: size.width,
528 + child: Column(
529 + children: <Widget>[
530 + Flexible(
531 + child: Column(
532 + mainAxisAlignment: MainAxisAlignment.center,
533 + children: <Widget>[
534 + Container(
535 + padding: EdgeInsets.fromLTRB(5, 5, 5, 0),
536 + width: size.width * 0.9,
537 + height: size.height * 0.18,
538 + decoration: BoxDecoration(
539 + color: Color(0xff8E97FD),
540 + borderRadius: BorderRadius.circular(10.0),
541 + ),
542 + child: Column(
543 + children: [
544 + Container(
545 + width: size.width,
546 + height: size.height * 0.05,
547 + child: Center(
548 + child: Text(
549 + '권장 약 복용량',
550 + textAlign: TextAlign.center,
551 + textScaleFactor: 1.0,
552 + style: TextStyle(
553 + color: Colors.white,
554 + fontSize: 28,
555 + fontFamily: 'NotoSansKR',
556 + fontWeight: FontWeight.w800),
557 + ),
558 + ),
559 + ),
560 + Container(
561 + width: size.width,
562 + height: size.height * 0.12,
563 + child: Row(
564 + mainAxisAlignment: MainAxisAlignment.center,
565 + children: [
566 + Text(
567 + '2',
568 + textAlign: TextAlign.center,
569 + textScaleFactor: 1.0,
570 + style: TextStyle(
571 + color: Colors.white,
572 + fontSize: 80,
573 + fontFamily: 'NotoSansKR',
574 + fontWeight: FontWeight.w800),
575 + ),
576 + Text(
577 + ' 개',
578 + textScaleFactor: 1.0,
579 + style: TextStyle(
580 + color: Colors.white,
581 + fontSize: 64,
582 + fontFamily: 'NotoSansKR',
583 + fontWeight: FontWeight.w800),
584 + )
585 + ],
586 + ),
587 + ),
588 + ],
589 + ),
590 + ),
591 + ],
592 + ),
593 + ),
594 + ],
595 + ),
596 + ),
597 + Container(
598 + margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
599 + height: size.height * 0.20,
600 + width: size.width,
601 + child: Column(
602 + children: <Widget>[
603 + Flexible(
604 + child: Column(
605 + mainAxisAlignment: MainAxisAlignment.center,
606 + children: <Widget>[
607 + Container(
608 + padding: EdgeInsets.fromLTRB(5, 5, 5, 0),
609 + width: size.width * 0.9,
610 + height: size.height * 0.18,
611 + decoration: BoxDecoration(
612 + color: Color(0xff8E97FD),
613 + borderRadius: BorderRadius.circular(10.0),
614 + ),
615 + child: Column(
616 + children: [
617 + Container(
618 + width: size.width,
619 + height: size.height * 0.05,
620 + child: Center(
621 + child: Text(
622 + '약 복용 시간',
623 + textAlign: TextAlign.center,
624 + textScaleFactor: 1.0,
625 + style: TextStyle(
626 + color: Colors.white,
627 + fontSize: 28,
628 + fontFamily: 'NotoSansKR',
629 + fontWeight: FontWeight.w800),
630 + ),
631 + ),
632 + ),
633 + Container(
634 + width: size.width,
635 + height: size.height * 0.12,
636 + child: Center(
637 + child: Text(
638 + '15:57',
639 + textAlign: TextAlign.center,
640 + textScaleFactor: 1.0,
641 + style: TextStyle(
642 + color: Colors.white,
643 + fontSize: 70,
644 + fontFamily: 'NotoSansKR',
645 + fontWeight: FontWeight.w800),
646 + ),
647 + ),
648 + ),
649 + ],
650 + ),
651 + ),
652 + ],
653 + ),
654 + ),
655 + ],
656 + ),
657 + ),
658 + ],
659 + ),
660 + ),
178 ); 661 );
179 } 662 }
180 663
......
...@@ -173,7 +173,7 @@ class _SignInPageState extends State<SignInPage> { ...@@ -173,7 +173,7 @@ class _SignInPageState extends State<SignInPage> {
173 context, 173 context,
174 MaterialPageRoute( 174 MaterialPageRoute(
175 builder: (BuildContext context) => 175 builder: (BuildContext context) =>
176 - DashBoard(pageNumber: 0), 176 + DashBoard(pageNumber: 1),
177 )); 177 ));
178 } 178 }
179 } 179 }
......
...@@ -43,3 +43,16 @@ flutter: ...@@ -43,3 +43,16 @@ flutter:
43 - images/main_logo.png 43 - images/main_logo.png
44 - images/setting.png 44 - images/setting.png
45 45
46 +fonts:
47 + # - family: Raleway
48 + # fonts:
49 + # - asset: fonts/Raleway-Regular.ttf
50 + # - asset: fonts/Raleway-Italic.ttf
51 + # style: italic
52 +- family: NotoSansKR
53 + fonts:
54 + - asset: assets/fonts/NotoSansKR-Regular.otf
55 + - asset: assets/fonts/NotoSansKR-Bold.otf
56 + weight: 500
57 + - asset: assets/fonts/NotoSansKR-Black.otf
58 + weight: 700
...\ No newline at end of file ...\ No newline at end of file
......