Flutter & Dart 플러터 List 정리

List 란? 

리스트는 데이터를 순차적으로 담을 수 있는 인덱싱 가능한 자료구조이다.
배열을 대체할 수 있다.

서브클래스로 Fixed-length list와 Growable list가 있는데,
말 그대로 Fixed-length list는 길이가 고정된 list이고,
Growable list는 아이템에 따라 길이가 조정된다.

 

List 사용법

void main() {
  var list = [];
  list.add(1);
  list.add(2);
  list.add(3);
  list.add(4);
  list.clear();
  print(list);
}

 

보통 이와 같이 사용한다.
이렇게 사용할 수도 있긴 하지만 리스트에 1차원적으로 값만 넣기 때문에 나는 이 방식은 추천 안 한다.

 

List <Map> 사용법

List<Map<String, dynamic>> category = [
  {'id': '0', 'name': '수입'},
  {'id': '1', 'name': '지출'},
  {'id': '2', 'name': '이체'},
];

 

나는 이런 방식으로 데이터를 맵으로 묶은 뒤 리스트에 담는다.
이 방식을 조금 응용하자면 Icon, 이미지, 등등의 여러 것들을 담을 수 있다.

 

 

List <Map> 응용

List<Map<String, dynamic>> inList = [
  {'id': '0', 'name': '월급', 'icon': const Icon(Icons.work_outline_rounded)},
  {'id': "1", 'name': '보너스', 'icon': const Icon(Icons.card_giftcard_rounded)},
  {'id': '2', 'name': '적금', 'icon': const Icon(Icons.savings_rounded)},
  {'id': '3', 'name': '용돈', 'icon': const Icon(Icons.volunteer_activism_outlined)},
];

 

수입의 세부 항목을 리스트로 담으면 이와같은 방식으로 담을 수 있다.

 

 

List <Map> 활용 방법은 ? 

SizedBox(
    width: 40,
    height: 40,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        inList[index]['icon']
        Text(
        	inList[index]['name'],
            style: AppTextStyle().black14),
      ],
    ),
  ),

 

와 같은 방법으로 사용 가능하다.

 

inList[index]['icon']  는  inList 리스트의 icon을 호출하는 것이기 때문에  바로 사용 가능하다.

inList[index]['name']   과 같은 방법으로 이름을 사용한다.

 

만약 id를 알고있을때  name or icon을 구하고 싶다면 ? 

var value = inList.firstWhere((element) => element['id'] == text)['name'];

 

text에 내가 알고있는 id 를 넣으면 inList에서 비교 후 매칭되는 name을 구할 수 있다.