목록개발/flutter (131)
파파비의 블로그
플러터, flutter) DatePicker와 Future에 대응하는 2가지 방법
일단 DatePicker 얘기부터 해보자 이것이 datepicker이다. 아마 패키지로는 다양한 datepicker 방식이 존재하지 않을까? 이것은 flutter에서 이미 만들어놓은 datapicker이다. 따로 패키지가 필요없다. Datepicker를 소환하는 방법은 쉽다. Showbottomsheet 처럼, showDatePicker 메소드를 실행하면된다. VS code의 경우 자동으로 인수들이 무엇이 필요한지 다 나타내는데, 저기서 initial Date는 켰을 때 처음으로 선택되어 있는 날짜이며, firstDate은 맨 처음 날짜를 가르켜서 여기 이전으로는 더 이상 볼 수가 없다. lastDate은 맨 마지막 날자다. 그런데, showDatePicker는 return 값이 Future이다. Fut..
플러터, flutter) List의 순서를 거꾸로... reverse (.map과 엮이면? > 위젯들의 순서를 바꿔주는기능!)
이 그림을 보면 원래는 W가 맨 왼쪽에 있었다. 오늘이 수요일이라 W는 오늘을 의미하는데, 직관적으로 W가 왼쪽에 있으면 좀 별로다. 그래서 순서를 바꿔야 하는데 이 위젯들은 .map을 통해 만들어졌다. 순서를 바꾸는 방법은 간단했다. List의 element들 순서를 바꿔버리는 것. (반대로) 그 방법은 이 사진의 맨 아래쪽처럼 .reversed.toList(); 로 하니 해결이되었다
플러터, flutter) Fitted Box) 사이즈를 일정하게 해준다, 예쁜 레이아웃을 위한 필수 위젯
이 그림을 보면, 위에 상단의 값이 매우 길어지면 원래는 그 아래의 bar도 위치가 변동하고, 그래서 전반적으로 울퉁불퉁한 레이아웃으로 변하게 되었다. 그 이유는 무엇일까? 바로 그 숫자가 길어지면서 사이즈의 변동이 생겨서 그런 것인데, Text의 사이즈가 바뀌더라도, 그 것을 감싸는 박스의 사이즈를 일정게 하려면, Text를 FittedBox로 감싸면 된다. 원래는 Text가 컨테이너에 있었지만 FittedBox로 감싸다 보니 훨씬 모양이 예뻐졌다. FittedBox는 간단하지만 필수 위젯이다.
플러터, flutter) 이쁜 카드 디자인 tip (ListTile + card 조합)
이렇게 이쁜 카드 모양을 만들고 싶을 때, (아래 2개의 카드) ListTile 위에 Card로 감싸서 효과를 주면 된다.
플러터, flutter) List에 들어 있는 값들을 뽑아서 하나의 값으로 만들기 .fold
List의 값들 중 하나를 뽑아서 sum을 내는 방법 > 머리속에 떠오르는 방법은 for을 사용하는 것이 떠오를 수 있다. 그러나 List의 메소드중에는 그런 것을 지원하는 것이다 있다. 바로 fold 메소드이다. Reduces a collection to a single value by iteratively combining each element of the collection with an existing value 이렇다고 한다. 위 코드를 분석해보면 1) 첫번째 인자는 초기값이다. 2) sum은 이전 값이며, element는 list의 element를 의미한다. return 값은 이전값인 sum을 대체한다. 그리고 다 끝나면 최종 return값이 return된다.
플러터, flutter) 채워지는 bar 만들기 (Stack & fractionallySizedBox)
1. 원하는 bar 사이즈의 container 만들기 2. 그 안에 stack을 만들어서, 내용물로 bar를 채울 것이다. 3. stack 안의 Container는 배경을 담당한다. 4. FractionallySizedBox는 상위 부모의 사이즈의 비율에 맞게 생겨난다. - FractionallySizedBox의 상위 부모는 Container 이고 height은 60, width는 10이다. - height Factor는 상위 부모 height의 비율을 말한다. - 나머지 데코 관련해서는 배경과 맞출 부분은 맞추고, 색은 다르게 해준다.
플러터, flutter) List에서 최근 7일 data 뽑아내기 (Datetime 객체를 활용)
여러가지 방법이 있지만 그중에서 편리한 방법 하나를 소개 한다. 1. List 객체의 메소드 중 하나인 where( test Method ); - 리스트 객체의 메소드인 where는 test 메소드를 돌려서 true가 나오면 객체를 새로운 리스트에 넣고, false이면 넣지 않는다. 그리고 리스트의 모든 객체를 테스트 완료하면 새로운 리스트를 반환한다. - test메소드는 리스트의 객체를 인수로 받는다. (index를 받는게 아님) 그리고 return 값이 있어야한다. 2. IsAfter( Datetime ) isAfter는 Datetime 객체의 메소드로서, isAfter의 인수로 들어간 값보다 after이면 true, 아니면 false를 반환한다.
플러터, flutter) 지난 1주일 data를 Map 자료구조로 만들기
이것이 큰 틀이다. 이런 것들을 잘 익혀두어야할 것 같다. Chart라는 위젯은 지난 일주일 동안의 거래 내역을 Transaction 이라는 객체들로 구성되어 받는다. Transaction 에는 가격, 날짜, 물품 등의 data가 들어있다. 우리는 이중에서 지난 일주일 동안의 거래에 대해 요일별로 총액을 누적해서 보여주고자 한다. 그러기 위해선 먼저 Data를 만들어놓고 그 data를 시각화해야하는데, 여기서는 data를 만드는 방법을 보여준다. List get groupedTransactionValues 이 부분은 getter로 설정한 모습이다. 굳이 getter가 아니어도 function으로 설정해도 무관한 부분이다. return List.generate(7, (index) { List.generat..