230522
오늘은 저번 포스팅에 이어
Container에 아이콘을 넣어보자.
1. Icons
위의 예시와 같이
Icon은 Container의 첫 번째 행에 있다.
그렇기에
위 사진의 자리에 Icon을 넣어준다.
Icon의 Icons에는 정말 수 많은 아이콘들이 존재하는데
우리는 Euro의 화폐 기호가 필요하므로
위와 같이
euro_rounded라는 아이콘을 가져와서
흰색으로 출력해보면?
귀염뽀짝한
유로 아이콘이 추가 되었다.
이제 이걸 좀 더 실례와 같게끔 꾸며보자.
위와 같이
Text가 있는 컬럼과 Icon사이를 정렬하기 위해
MainAxisAlignment.spaceBetween으로 정렬하고
아래 Icon 또한 크기와 색상을 넣어주었다.
2. Transform
하지만 현재
Container안에 있는 Icon들은
크기가 벗어나 있는데,
이를 해결하기 위해
우리는 Transform을 사용할 것이다.
위와 같이 Icon이 있던 곳을 잘라내기 하고
Transform.scale로 묶어줄 것이다.
이렇게 하고 저장하면?
error가 난다.
그 이유는
scale에 값이 없어 child가 인식을 못하기 때문이다.
위와 같이 값을 넣어서
저장하면?
위와 같이 다른 요소들은 그대로인데
아이콘만 커진것을 확인할 수 있다.
이제 이 아이콘을 아래로 살짝만
옮겨보자.
우선 Icon에 코드작업표시를 열고
Wrap with widget을 누른다.
그리고 위와 같이
Transform.translate로 감싼다음
offset을 이용하여
x좌표와 y좌표를 지정해주면 된다.
이제 Container 밖에 넘쳐 나오는 Icon을 잘라내보자.
3. ClipBehavior
ClipBehavior는 어떤 아이템이
overflow가 되었을때
감싸고 있는 요소가
어떻게 동작하게끔 할건지 알려주는 장치이다.
때문에 우리는 Container로 가야한다.
위와 같이 Container에
ClipBehavior를 사용해서
Clip.hardEdge를 적용해주면?
드디어 첫 번째 카드 완성이다.
4. Reusable Card
지난번 Button과 마찬가지로
몇 개의 요소만 제외하고 모든것이 동일하기에
똑같이 Card도 Class로 만들어보자.
currency_card.dart 파일을 새로 만들고
StatelessWidget 상속받은
CurrencyCard 클래스를 만들고
build라는 위젯을 선언한 다음
우리가 만들었던
Container를 가져와
build 위젯의 return으로 넣어준다.
그리고 우리가 사용할 Card에서
변경될 값들은
화폐명 : name
화폐 기호 : code
금액 : amount
화폐 아이콘 : icon
이므로 변수로 선언해준다.
💡 Icon의 데이터타입
Icon의 데이터타입은
IconData이다.
그리고 위와 같이 선언된 변수에
코드 작업 표시를 실행해
생성자를 만들어 준다.
그리고 아래의 위젯을 위의 변수로 치환해준다.
그리고 본문에서 삭제한
Container자리에
위 사진과 같이
CurrencyCard 위젯을 넣고
값을 대입하면 된다.
5. Inverted Card
문제는 2번째 Card(Container) 이다.
위와 같이 색이 반전되어 있기 때문이다.
CurrencyCard Class로 가서
반전 옵션을 만들어보자.
위와 같이
isInverted라는 변수를 bool 타입으로 만들고
생성자에 추가해준다.
그리고 위와 같이
isIverted ? (이면) Colors.white
: (그렇지 않으면?)
Color(0xFF!F2123)
코드를 바꿔준다.
그리고 위 색상은 자주 쓰여
변수로 선언해 주었다.
그리고 위와 같이 바꿔주었다.
이렇게 정의한것을 토대로
본문(main.dart)에 가서
카드 3개에 적용해 주면?
위와 같이 Overflowed 되었다고
flutter가 경고한다.
6. SingleChildScrollView
우리는 위와 같이 프레임에 벗어나는 요소를
유저가 스크롤을 통해 다 볼 수 있게 할 수 있다.
맨 상단 쪽
body의 Padding을
선택해 코드 작업 표시를 열고
코드 작업 표시의
Wrap with Widget을 실행해
SingleChildScrollview로 감싸준다.
이제 모든 카드가 다 보인다.
마지막으로 Transform 위젯을 통해
카드들이 겹치게 보이게 만들자.
위와 같이
두 번째와 세 번째 카드를
각각 Wrap with Widget을 실행해
Transform으로 묶어주고
offset을 통해 위치를 조정해 주었다.
이제 우리가 원했던 디자인으로
완성된것을 확인할 수 있다.
