파파비의 블로그
플러터, flutter) 지난 1주일 data를 Map 자료구조로 만들기 본문
이것이 큰 틀이다. 이런 것들을 잘 익혀두어야할 것 같다.
Chart라는 위젯은 지난 일주일 동안의 거래 내역을 Transaction 이라는 객체들로 구성되어 받는다.
Transaction 에는 가격, 날짜, 물품 등의 data가 들어있다. 우리는 이중에서
지난 일주일 동안의 거래에 대해 요일별로 총액을 누적해서 보여주고자 한다.
그러기 위해선 먼저 Data를 만들어놓고 그 data를 시각화해야하는데, 여기서는 data를 만드는 방법을 보여준다.
List<Map<String, Object>> get groupedTransactionValues
이 부분은 getter로 설정한 모습이다. 굳이 getter가 아니어도 function으로 설정해도 무관한 부분이다.
return List.generate(7, (index) {
List.generate 메소드는 List의 static 메소드인데, List를 만들어낸다.
7은 length를 의미하는데, 7번 반복한다는 의미이고, index는 반복회수를 의미한다.
index 뒤에 { }이 있는데, 여기서는 list에 들어갈 객체가 return되는 함수가 들어간다.
7이라는 숫자는 여기서는 Transaction data of recent 7days 이기 때문에 7로 박았지만
dynamic하게 설정도 당연히 가능하다.
느낌을 딱 보면 for문이 떠오를텐데, for문으로 작성도 얼마든지 가능하다.
(but 이게 더 간단해 보이고 좋은듯)
final weekDay = DateTime.now().subtract(Duration(days: index));
지난 7일간의 날짜들을 어떻게 뽑아낼 것인가? 이렇게 뽑는다.
현재 날짜를 기준으로, subtract를 한다.
얼마를 subtract할 것인가?
Dart에서는 Duration이라는 시간경과 개념을 가진 객체가 있다.
Duration에서 days를 index로 받아서, 0부터 6까지 빼면 일주일간의 날짜 data가 완성된다.
근데 알다시피 Datatime을 기준으로 substrack한 것이기 때문에,
이 데이터는 년-월-일 + '시간' 까지 포함되어 있다.
여기서 특정 데이터만 뽑아내는 방법은 무엇일까?
weekDay.day, weekDay.year, weekDay.month 처럼 속성들을 찾아보면 된다.
역시 요일을 나타내는 속성인 weekDay.weekday도 존재한다.
그런데 맨 마지막 줄에는
이렇게 weekDay.weekday를 쓰지않고, DateFormat.E(weekDay)를 쓴다.
이 둘의 차이는 무엇인가? > weekDay.weekday는 요일의 풀네임을 반환한다.
근데 우리는 'M', 'T' 이런식으로 앞의 한글자만 원한다. 요일 풀네임을 사용하면,
그에 따라 다시 한 글자로 변환하는 작업을 거쳐야한다. 그렇기 보단 한번에 해결하는게 더욱 좋지 않을까?
DateFormat은 intl package의 class인데, E는 요일을 나타내고 한글자로 나타낸 만큼 첫글자만 따서 온다.
그래서 'M', 'T'이런식으로 우리가 원하는 형태로 도출된다.
수정
Mon, Tue, Wed 이렇게 도출된다. 그러니까 사실은 weekDay.weekday로 써도 상관이 없는 것이다.
한 글자로 변환하는 작업을 거쳐야한다
=> 매우 쉽다. String 값에 뒤에 .substring(startindex, endindex) 만 붙여주면 끝.
total amout of transactions money per day
마지막 부분은 길어서 이미지로 가져왔다.
우리는 날짜와, 그 날의 모든 거래 총액을 원한다.
전달 받은 데이터는 지난 7일간의 모든 거래이다.
그래서 모든 거래들을 확인하며, 날,월,일 을 확인해서 각 날짜에 맞는 거래인지를 확인하고
맞다면 총액에 더해주는 과정이다.
weekday 객체 자체가 날짜 + 시간의 개념이라 단순히 객체값 자체를 비교하면 절대 true 값이 나올 수가 없다.
return {'day' : DateFormat.E(weekDay),'amount' : totalSum};
이부분은 마지막으로 Map의 형태로 return하는 부분이다.
이 Map들이 모여서 List가 만들어진다.
'개발 > flutter' 카테고리의 다른 글
플러터, flutter) 채워지는 bar 만들기 (Stack & fractionallySizedBox) (0) | 2020.05.27 |
---|---|
플러터, flutter) List에서 최근 7일 data 뽑아내기 (Datetime 객체를 활용) (0) | 2020.05.27 |
플러터, flutter) Font 사용하기 (0) | 2020.05.26 |
플러터, flutter) ThemeData tip들 (0) | 2020.05.26 |
플러터, flutter) BottomSheet 제조 메소드, showBottomSheet (0) | 2020.05.26 |