[Flutter] GetX와 ListView로 동적 리스트 관리하기

Flutter에서 리스트를 보여줄 때, 데이터가 변경되면 UI를 자동으로 갱신하고 싶을 때가 있습니다.
이럴 때 GetX 상태관리를 활용하면 간단하고 효율적으로 상태 변화를 UI에 반영할 수 있습니다.

이번 글에서는 GetX와 ListView를 사용하여 동적 리스트를 구현하는 방법을 살펴봅니다.

1. GetX 설치

먼저 pubspec.yaml에 GetX 패키지를 추가합니다.

 

dependencies: flutter: sdk: flutter get: ^4.6.5

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5

그리고 flutter pub get을 실행합니다.

 

2. Controller 생성

GetX의 핵심은 Controller입니다.
데이터를 관리하고 UI와 연결할 수 있는 클래스입니다.

 

import 'package:get/get.dart';

class ItemController extends GetxController {
  // RxList를 사용하면 리스트 변경 시 UI 자동 업데이트
  var items = <String>[].obs;

  void addItem(String item) {
    items.add(item);
  }

  void removeItem(int index) {
    items.removeAt(index);
  }
}

• .obs를 붙이면 **반응형 상태(Rx)**가 됩니다.
• 리스트가 바뀌면 이를 감지하여 UI가 자동으로 갱신됩니다.

---

3. UI 구현

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controller/item_controller.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ItemController controller = Get.put(ItemController());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GetX ListView Example')),
        body: Column(
          children: [
            Expanded(
              child: Obx(() => ListView.builder(
                    itemCount: controller.items.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(controller.items[index]),
                        trailing: IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () => controller.removeItem(index),
                        ),
                      );
                    },
                  )),
            ),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: TextEditingController(),
                      onSubmitted: (value) {
                        if (value.isNotEmpty) {
                          controller.addItem(value);
                        }
                      },
                      decoration: InputDecoration(
                        hintText: '아이템 입력 후 엔터',
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명

1. Get.put(ItemController())로 Controller를 앱 전체에 등록.
2. Obx 위젯으로 리스트를 감싸면, items 리스트가 변경될 때 자동으로 갱신.
3. 삭제 버튼을 누르면 removeItem 호출, 텍스트 입력 후 엔터를 누르면 addItem 호출.

---

4. 결과

• 리스트에 아이템을 추가하면 자동으로 화면에 표시.
• 아이템을 삭제하면 즉시 UI에서 사라짐.
• 별도의 setState 호출 필요 없음 → 코드 간결, 성능 효율적.

---

5. 마무리

GetX를 사용하면 Flutter에서 상태관리가 매우 직관적이고 간단해집니다.
특히 ListView처럼 동적으로 데이터를 추가/삭제하는 UI에서 복잡한 코드 없이도 즉시 반영할 수 있어 개발 효율성이 크게 올라갑니다.