[Flutter] (Project) MapleApp: 20. Stat Page 제작-1

🐇 intl, NumberFormat

숫자를 표현해야 하는 텍스트가 많았다. 방법을 찾다 보니, 이전에 DateFormat을 위해 설치했던 intl library에 NumberFormat이 존재했다. reference를 더 자세히 읽어보니 날짜/숫자 형식 지정을 지원하고 있었다.

 

※ reference : https://pub.dev/packages/intl

intl의 NumberFormat을 활용해 내가 원하는 방식으로 다양하게 표현해보자.

🥕 콤마 구분

var mainFormatter = NumberFormat('#,###,###,###,###,###', 'ko_KR');

🥕 소수점 구분

var percentFormatter = NumberFormat('###.##', 'en_US');

🥕 한국 화폐 단위 적용

var measure = ['억', '만', ''];
var value =
    subFormatter.format(intValue).toString().split(',');
var len = measure.length - value.length;
newString = '';
for (var i = 0; i < value.length; i++) {
  newString = '${newString} ${value[i]}${measure[len + i]}';
}

🐇 Dart의 Type지정과 관리

아래에 있는 코드를 기본 코드라고 하자.

static final List mainList = [
	['1','2','3'],
	['1','2','3'],
	['1','2','3'],
]

그랬을 때, 내가 기본 코드와 같이 선언한 값을 사용하고 있을 때, Dart 자체의 문법과 컴파일러의 인식이 어떻게 되는지 몰라 헤매고 있었다.

 

※ reference : https://stackoverflow.com/questions/49603021/type-listdynamic-is-not-a-subtype-of-type-listwidget

그래서 stackoverflow를 통해 다양한 해결 방법을 찾아냈고. 그 방법을 정리하면 다음과 같다.

 

🥕 List<List<dynamic>>으로 지정해주기

위 코드에서 List만 선언해 줬을 뿐, 다음 List에 대해서는 선언된 것이 없기 때문에 Dart compiler에서 mainList를 List<dynamic>으로 생각하고 있기 때문에 map method를 사용할 수 없던 것이었다.

 

🥕 dynamic으로 온 변수에 타입 명시해주기

기존에 제시되었던 기본 코드의 변수를 가져와 더블 map을 다음과 같이 구현했다고 해보자.

mainList.map(
	(subList) => Column(
		child: subList.map(
			(element) => Container()).toList(),
)).toList(),

이때 Dart Compiler는 mainList는 List<dynamic>으로 인지하고, subList를 dynamic 요소로 인지한다. 이번 방법은 이 subList를 List<String> 또는 List<dynmaic>으로 인지시키기 위한 방법이다.

List<~>로 subList의 타입을 명시해주는 이유는, Dart Compiler가 subList는 dynamic 개체가 아닌 List 개체로서 받아들여 map method를 사용할 수 있게 하기 위함이다. List로서 인지할 수 있게 만들어주면 map method를 사용할 수 있기 때문이다. 방법은 다음과 같이 2가지 방법이 있다.

 

🍒 List<String>.from(subList).map(~)

※ reference : https://api.dart.dev/stable/3.2.4/dart-core/List/List.from.html

 

List의 from method는 매개변수로 오는 반복 가능한 element 요소를 지정된 type형태를 지닌 List 목록으로 만들어 반환해준다. 그래서 subList가 List<String> subList로 새롭게 생성되었기 때문에 Dart compiler에서 List로 받아들이고 map method를 사용할 수 있게 된 것이다.

 

🍒 (subList as List<String>).map(~)

Dart Compiler가 subList의 형태를 List<String>으로 인지할 수 있게 해주는 방법이다.

가장 훌륭한 방법은 선언 당시 List<List<dynamic>>으로 선언해주는 것이다. 물론 mainList의 type을 명시하지 않으면 Dart Compiler는 내부 요소를 확인하고 알아서 List<List<String>>으로 인지한다. 하지만 2차원 배열 내부에 있는 값이 1개라도 변하게 되면 String이 아닌 Object로 인지하게 된다. 또한, 내부 값이 변할 수 있다는 상황으로 인해 List<List<String>>으로 선언할 수 없게 되고, 결국 dynamic으로 선언하게 되는 것이다.

가장 중요한 문제는 List<List<dynamic>>을 List<dynamic>으로 인지하고 있었기 때문이므로, 내부 요소에 따라 계층구조라도 정확히 표현해주어 나와 같은 오류를 겪지 않도록 바란다.

🐇 function example({required String a, int b, double c})

Dart에서 함수를 사용하다 보면 위처럼 사용하는 경우가 많다. Dart에서는 중괄호를 사용하여 매개변수를 명명할 수 있으며, 함수 호출 시 해당 명명된 매개변수에 값을 할당할 수 있습니다.

그래서 우리는 위와 같은 함수에 들어가는 매개변수를 “명명된 매개변수(named parameter)”이라 하고, 그 함수를 호출하는 것을 “명명된 매개변수 호출”이라고 합니다.