Flutter/Dart 통장 잔고처럼 숫자 표시하기

Flutter intl

사용예시

금액을 표시할 때 아래와 같이 세자리 수 마다 쉼표를 찍어서 보여주고 싶을 땐 어떻게 해야할까?

intl

문자열을 포메팅해주는 라이브러리라고 할 수 있다. 위의 예시처럼 3자리마다 쉼표를 찍어주는 경우가 그 예이다.

사용 방법

https://pub.dev/packages/intl/install Flutter에 dependencies를 추가하는 것은 다른 라이브러리 들과 동일 하므로 따로 설명은 하지 않겠다.

class 안에서 formatting을 위한 변수를 선언

final f = NumberFormat('###,###');

'${f.format(money)}원',

변수명.formart(숫자) 로 사용한다.

해당 부분의 코드 전문

class CurrentMoney extends StatelessWidget {
  final int money;
  final String profit;
  final f = NumberFormat('###,###');

  CurrentMoney({super.key, required this.money, required this.profit});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        const SizedBox(height: 10),
        Row(
            children: const [
              SizedBox(width: 10),
              Text('보유 주식',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 18),
              ),
            ]
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(width: 10),
            Text(
              '${f.format(money)}원',
              style: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            IconButton(
              icon: const Icon(Icons.arrow_forward_ios_sharp),
              color: Colors.white,
              onPressed: () {},
              iconSize: 15,
            ),
          ],
        ),

        Row(
          children: [
            const SizedBox(width: 10),
            Text(
              profit,
              style: TextStyle(
                  color: Colors.blue[400],
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 0.5
              ),
            ),
          ],
        ),
      ],
    );
  }
}

• 작성자: YunSukHyun