Icon 및 변환

flutter에서는 다양한 icon을 지원한다.
인터넷에서 따로 다운할 필요성을 못느낌

우선 Icon은 다음과 같이 넣을 수 있다.

Icon(
	Icons.euro_rounded,
	color: Colors.white,
	size: 88,
),

euro아이콘을 넣고 색과 크기를 변경한 모습

크기를 더 키우기 싶을 때

Transform.scale(
                              scale: 2.2,
                              child: Transform.translate(
                                offset: const Offset(-5, 12),
                                child: const Icon(
                                  Icons.euro_rounded,
                                  color: Colors.white,
                                  size: 88,
                                ),
                              ),
                            ),

Transform.scale을 사용한다.
scale을 지정하여 크기를 키울 수 있는데
Icon의 size와 다른 점은

• size : 크기가 커짐에 따라 Icon을 감싸는 Container의 크기도 같이 변한다.
• scale : 독립적으로 본인의 크기만 키울 수 있다 (자신을 감싸는 요소(예를 들어 Container)로부터 overflow할 수 있다.)
  그리고 transform.tanslate(ofsset : Offset()을 통해 이동도 가능

overflow 자르기

overflow가 보기 싫어서 내가 정한 박스 (Container) 크기에 맞게 자르고 싶을 때

Container(
                      clipBehavior: Clip.hardEdge,

재사용화 하기

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CurrencyCard extends StatelessWidget {
 final String name, code, amount;
 final IconData icon;
 final bool isInverted;
 final _blackColor = const Color(0xFF1F2123);

 const CurrencyCard({
   super.key,
   required this.name,
   required this.code,
   required this.amount,
   required this.icon,
   required this.isInverted,
 });

 @override
 Widget build(BuildContext context) {
   return Container(
     clipBehavior: Clip.hardEdge,
     decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(25),
       color: isInverted ? Colors.white : _blackColor,
     ),
     child: Padding(
       padding: const EdgeInsets.all(20),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Text(
                 name,
                 style: TextStyle(
                     color: isInverted ? _blackColor : Colors.white,
                     fontSize: 32,
                     fontWeight: FontWeight.w600),
               ),
               const SizedBox(
                 height: 15,
               ),
               Row(
                 children: [
                   Text(amount,
                       style: TextStyle(
                         color: isInverted ? _blackColor : Colors.white,
                         fontSize: 20,
                       )),
                   const SizedBox(
                     width: 5,
                   ),
                   Text(code,
                       style: TextStyle(
                         color: isInverted ? _blackColor : Colors.white70,
                         fontSize: 20,
                       )),
                 ],
               )
             ],
           ),
           Transform.scale(
             scale: 2.2,
             child: Transform.translate(
               offset: const Offset(-5, 12),
               child: Icon(
                 icon,
                 color: isInverted ? _blackColor : Colors.white,
                 size: 88,
               ),
             ),
           ),
         ],
       ),
     ),
   );
 }
}

카드를 별도 클래스로 만들었다.

• blackColor : Color를 매번 복사해서 사용하지 않고 final변수로 사용하는데
  언더바()를 사용함으로써 private을 적용할 수 있다.

const CurrencyCard(
                      name: 'Euro',
                      code: 'EUR',
                      amount: '6 428',
                      icon: Icons.euro_rounded,
                      isInverted: false,
                    ),

다음과 같이 사용할 수 있다.

그리고 main.dart에서 추가 변경사항이 있는데
scrollview
기존에는 Padding이 body였지만

body: SingleChildScrollView(

다음처럼 변경한다.
이전에도 공부했듯이 flutter는 화면을 요소가 넘치면 에러를 발생시키는데,
card를 세개 넣으면서 이 에러가 발생한다.
scroll을 넣어주어 화면이 넘치는 게 아니라 scroll되도록 했다.

코드 챌린지

이전에 만든 CurrencyCard.dart를 수정하여 card 관련 중복 코드를 줄여보자.
(ex. offset)

//currencyCard.dart

return Transform.translate(
      offset: Offset(0, (order - 1) * -20),
      child: Container(

위처럼 currencyCard를 수정해서 offset도 위젯화하고

main.dart
CurrencyCard(
                      name: 'Dollar',
                      code: 'USD',
                      amount: '8 22',
                      icon: Icons.monetization_on_rounded,
                      isInverted: false,
                      order: 3,
                    ),

main에서는 이렇게 변경한다.
위 예제에서 order가 3이기 때문에 (3-1)* -20이 적용되어 3번째 카드의 offset은 -40이 적용된다.