[HUT] 7/16 개발일지

요즘 날씨가 장난 아니다. 날씨가 더워서 그런지 너무 피곤한 것 같다.

오늘은 홈화면 마무리를 할 거 같다. 적어도 시작할 거 같다.

개발

사실 이번 디자인의 핵심은 상단에 있는 출발지/도착지 구역과 아래에 있는 최근 이용 사이에 있는 그라데이션이다. 그라데이션을 추가함으로 구별감을 주는 것을 목표로 했다.

 

가장 먼저 해본 것은 피그마로 만들 때 처럼 Divider 을 사용하여 그라데이션을 주는 방식이었다. 되는 듯 했으나 디자인이 예쁘지 않아서 포기했다.

 

그 다음, 약간 직관적이게 접근하여 상단에 있는 톱메뉴를 컨테이너에 넣어 그림자를 두는 형식을 사용해봤다. 이게 훨신 좋아서 이 방법을 사용하기로 결정했다. 또한, 그분선을 확실하게 두기 위해서 디자인 한 것처럼 회색 선을 두었다.

 

처음 디자인 (좌) / 애플리케이션 (우

피그마 디자인을 오래 봐서 그런지 많이 어색하지만 나름 잘 나온 것 같아 기분이 좋았다.

 

그 다음은 아래 최근 이용 기록인데 처음 봤을 때는 많이 어려워 보였다.

 

하지만, Column/Row 을 사용하여 차근차근 코딩해본 결과 어렵지 않게 완성할 수 있었다.

 

사실 디자인이 살짝식 마음에 들지 않지만 그건 나중에 조절 하는 것으로 했다.

 

이번 기능에서 처음으로 클래스를 만들어 보았다.

 

	import 'package:flutter/material.dart';
	import 'package:flutter_svg/svg.dart';
	enum TransportType { TAXI, CARPOOL }
	enum TransportStatus { FINISHED, INPROGRESS, WRAPUP }
	extension TransportStatusExtension on TransportStatus {
	Color get color {
	switch (this) {
	case TransportStatus.INPROGRESS:
	return Color(0xffD1AF55);
	case TransportStatus.WRAPUP:
	return Colors.lightBlue;
	case TransportStatus.FINISHED:
	return Colors.grey;
	default:
	return null;
	}
	}
	String get name {
	switch (this) {
	case TransportStatus.INPROGRESS:
	return "진행중";
	case TransportStatus.WRAPUP:
	return "정산중";
	case TransportStatus.FINISHED:
	return "완료";
	default:
	return null;
	}
	}
	}
	class RecentItem {
	TransportType ttype;
	DateTime depTime;
	String dest, from, roomName;
	TransportStatus tstatus;
	RecentItem(
	{this.ttype,
	this.depTime,
	this.dest,
	this.from,
	this.roomName,
	this.tstatus});
	Widget display() {
	const EdgeInsets commonMargin = const EdgeInsets.fromLTRB(0, 0, 10, 0);
	return InkWell(
	onTap: () {
	print("Clicked");
	},
	child: Container(
	padding: EdgeInsets.symmetric(horizontal: 15),
	margin: EdgeInsets.fromLTRB(0, 5, 0, 5),
	height: 50,
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	// crossAxisAlignment: CrossAxisAlignment.stretch,
	children: [
	Container(
	margin: commonMargin,
	child: SvgPicture.asset(
	"resources/frontal-taxi-cab.svg",
	semanticsLabel: "Taxi Icon",
	width: 25,
	),
	),
	Container(
	decoration: BoxDecoration(
	border: Border.all(color: Colors.black, width: 0.3),
	borderRadius: BorderRadius.circular(5.0)),
	margin: commonMargin,
	padding: EdgeInsets.symmetric(horizontal: 20, vertical: 3),
	child: Text(
	"${depTime.month}/${depTime.day}\n${depTime.hour.toString().padLeft(2, '0')}:${depTime.minute.toString().padLeft(2, '0')}",
	textAlign: TextAlign.center,
	style: TextStyle(fontSize: 11, height: 1.5),
	)),
	Container(
	child: Expanded(
	child: Container(
	// decoration:
	// BoxDecoration(border: Border.all(color: Colors.red)),
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Row(
	children: [
	Text(from, style: TextStyle(fontSize: 14)),
	Icon(Icons.arrow_right),
	Text(dest, style: TextStyle(fontSize: 14))
	],
	),
	Text(roomName, style: TextStyle(fontSize: 9))
	],
	),
	),
	),
	),
	Container(
	padding: EdgeInsets.symmetric(vertical: 5, horizontal: 16),
	decoration: BoxDecoration(
	border: Border.all(color: tstatus.color, width: 0.8),
	borderRadius: BorderRadius.circular(3.0)),
	child: Text(
	tstatus.name,
	style: TextStyle(color: tstatus.color, fontSize: 9),
	),
	)
	],
	),
	),
	);
	}
	}

view raw recent_item.dart hosted with ❤ by GitHub

오히려 이렇게 클라스 작업하고 보여주는 작업이 걱정했던 것과는 반대로 더 빠르고 수월했던 것 같다.

 

이번 작업을 하며 느낀점은, 저번에 가운데 정렬을 하면서 'GestureDetector' 를 사용했던 것이 생각이 난다. 해당 위젯은 클릭은 감지할 수 있지만, 눌렀을때 눌림을 표시해주는 효과는 보여지지 않는다. 이를 원했던 나는 조금 더 찾아본 결과 'InkWell' 라는 위젯을 볼 수 있었다. 이를 사용했을 때 원하는 효과가 잘 나왔다.

 

엄청 어려워 보이던 홈 화면에 마지막 기능이 완료가 되었다. 사실 백엔드랑 연결 하는 작업까지 할 까 고민을 해봤지만, 그것은 다음으로 미루는 것으로 하고, 다음에는 매칭 화면을 작업할 것 같다.

 

많이 어려워 보였지만 수월하게 끝난 것을 보고 자신감을 얻었던 하루였다. 아직까지 화면에 보여지는 방식이 생소하지만, 점점 익숙해 지는 기분이 들어 매우 좋았다.

 

참고자료

elevation 효과를 검색하다가 사용한 그림자 효과 - https://www.codegrepper.com/code-examples/whatever/how+to+add+elevation+to+container+flutter

Bottom infinite overflow 해결 - https://stackoverflow.com/questions/63638106/bottom-overflowed-by-infinity-pixels

enum 사용하기 위한 검색 - https://stackoverflow.com/questions/13899928/does-dart-support-enumerations

enum 에 값을 넣기 위한 검색 - https://stackoverflow.com/questions/38908285/add-methods-or-values-to-enum-in-dart, https://stackoverflow.com/questions/15854549/how-can-i-build-an-enum-with-dart/15854550#15854550

스크롤을 하기 위해 넣은 List View - https://stackoverflow.com/questions/52053850/flutter-how-to-make-a-column-screen-scrollable

추후 추가할 LazyLoading 이 궁금해서 조금 읽어봤어요 - https://stackoverflow.com/questions/49508322/flutter-listview-lazy-loading

Inkwell 기능대해서 읽었습니다 - https://stackoverflow.com/questions/58295509/flutter-how-to-make-an-entire-row-clickable

태핑 효과  - https://stackoverflow.com/questions/62320511/how-to-make-a-container-lighten-on-hold-on-tap-in-flutter

Datetime 관련 내용 조사 - https://api.flutter.dev/flutter/dart-core/DateTime-class.html

아이콘을 추가하기 위한 flutter_svg - https://pub.dev/packages/flutter_svg