플러터 Dart For문, List Add, Remove, RemoveAt 사용법

안녕하세요. 지난 글에서는 플러터(flutter)의 ListView.builder을 통해 동적으로 ListTile을 생성해 보았습니다. 이번 글에서는 메모장 앱을 만들기 위해 Dart for문를 사용하여 데이터를 보여주고 데이터를 관리하기 위해 Add(추가), remove(삭제) 메서드를 사용하는 방법에 대해 작성하겠습니다.

플러터 강의 영상에서도 해당 글의 내용을 확인할 수 있습니다.

Dart List 생성

이 부분은 초기 데이터가 포함된 문자열 리스트를 생성합니다. 아래처럼 <String>을 생략할수 있습니다만 변수의 타입을 명시적하여 코드를 이해하기 쉽게 사용하는 것을 권장 합니다.

List<String> items = ['Item 1', 'Item 2', 'Item 3']; 

// List items = ['Item 1', 'Item 2', 'Item 3'];

데이터 추가 및 삭제

add, remove 메서드를 사용하여 리스트에 새로운 항목을 추가하거나 삭제할 수 있습니다. 그리고 removeAt 메서드는 리스트에서 특정 인덱스의 항목을 제거하는데 사용됩니다.

List<String> items = ['Item 1', 'Item 2', 'Item 3']; 

items.remove('Item 2'); // [Item 1, Item 3]

items.removeAt(0); // [Item 3]

items.add('New Item'); // [Item 3, New Item]

Dart for문

메모장앱의 데이터를 관리하기 전에 Dar에서 반복문인 for를 사용하는 방법이 3가지를 살펴보겠습니다. 각각의 방법에 대한 설명은 아래와 같습니다.

기본적인 for루프 사용

이 부분은 전통적인 for 루프를 사용하여 리스트를 순회합니다. i 변수를 사용하여 각 항목의 인덱스와 값을 출력합니다. int i = 0으로 초기화하며 i < items.length가 될때까지 i를 1씩 증가시킵니다.

List<String> items = ['Item 0', 'Item 1', 'Item 2'];

for (int i = 0; i < items.length; i++) {

  print('index출력: $i, item출력: ${items[i]}');

}

for-in 루프 사용

이 부분은 for-in 루프를 활용하여 리스트를 순회합니다. 루프 내에서 각 항목을 item 변수에 할당하여 출력합니다.

 List<String> items = ['Item 0', 'Item 1', 'Item 2'];

// 리스트의 item을 출력
for (String item in items) {
  print('item출력: $item');
}

forEach 메서드 사용

이 부분은 리스트의 forEach 메서드를 활용하여 순회합니다. 각 항목을 처리하는 익명 함수를 전달하며, 이 함수 내에서 각 항목을 출력합니다.

List<String> items = ['Item 0', 'Item 1', 'Item 2'];

items.forEach((item) {
  print('item출력: $item');
});

메모 추가, 삭제 기능

메모장앱 만들기를 이어서 MyMemoApp 클래스에 items 리스트를 선언합니다.

class MyMemoApp extends StatelessWidget {

  List<String> items = ['Item 0', 'Item 1', 'Item 2'];
  ...
}

appbar에 있는 Iconbutton() 버튼의 onPressed() 속성에 items.add(‘New Item’)메소드를 이용하여 리스트값(메모)를 추가 할 수 있도록 수정 합니다.

...
actions: [
  IconButton(
      onPressed: () {
        items.add('New Item');
        print(items);
      },
      style: IconButton.styleFrom(foregroundColor: Colors.white),
      icon: Icon(Icons.create)),
],
...

상단의 create버튼 클릭시 ’New Item’가 추가되고 아래 콘솔창에서 현재 리스트의 값인 [Item 0, Item 1, Item 2, New Item]을 확인할 수 있습니다.

ListView.builder를 사용하여 동적인 리스트를 생성하고 삭제 버튼을 통해 List의 값(메모)을 삭제하는 코드입니다. itemCount 속성에 하드코딩 대신 items의 현재 길이 items.length로 수정합니다. 삭제 버튼(Iconbutton())의 onPressed() 속성에 items.removeAt(index)메소드를 이용하여 리스트값(메모)를 삭제할 수 있도록 수정 합니다.

...

body: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('item $index'),
        trailing: IconButton(
          icon: const Icon(Icons.delete),
          onPressed: () {
            items.removeAt(index);
            print(items);
          },
        ),
      );
    })));
...

Item2의 오른쪽 delete 아이콘을 클릭시 items.removeAt(2) 메서드로 2번 인덱스의 값을 삭제합니다. 아래 출력에서 삭제된 후의 리스트 값 [Item 0, Item 1]을 아래 콘솔창에서 확인할 수있습니다.

마무리

지금까지 진행 상황에서는 버튼을 클릭시 리스트의 값이 추가되거나 삭제되지만 화면에 업데이트되지 않습니다. 앱의 화면에 현재 데이터 상황을 업데이트하기 위해서는 화면을 다시 그리는 setState 메서드를 호출해야 합니다. 다음 글에서는 setState() 메서드를 사용하는 방법과 StatelessWidget, StatefulWidget에 대해서 알아보겠습니다. 읽어주셔서 감사합니다.

전체 코드는 링 크에서 확인할 수 있습니다.

플러터 상태관리, StatefulWidget, StatelessWidget – 메모장 앱 만들기 (4)

플러터 Dart for문, List add, remove, removeAt 사용법 – 메모장 앱 만들기 (3)

목차