[flutter] getX 함수를 사용하여 터치 이벤트에 따른 정렬된 목록 위젯 구현하기

04 Dec 2023

flutter

Flutter는 getX 패키지를 사용하여 터치 이벤트를 간편하게 처리할 수 있습니다. 이번 포스트에서는 getX 함수를 활용하여 터치 이벤트에 따라 정렬된 목록 위젯을 구현해보겠습니다.

1. getX 패키지 설치하기

먼저, getX 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 getX 패키지를 추가해주세요.

dependencies:
  getX: ^4.3.5

dependencies 항목에 getX 패키지를 추가한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치해주세요.

2. 정렬된 목록 위젯 구현하기

GetX 패키지를 사용하여 터치 이벤트에 따라 정렬된 목록 위젯을 구현할 수 있습니다. 먼저, 목록 위젯을 정의하기 위한 ListView 위젯을 생성해보겠습니다.

class SortedListWidget extends StatelessWidget {
  const SortedListWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SortController>(
      init: SortController(),
      builder: (controller) {
        return ListView.builder(
          itemCount: controller.sortedItems.length,
          itemBuilder: (context, index) {
            final item = controller.sortedItems[index];
            return ListTile(
              title: Text(item),
            );
          },
        );
      },
    );
  }
}

위 코드에서 주목해야 할 부분은 GetBuilder 위젯입니다. 이 위젯은 getX 패키지의 핵심 기능 중 하나로서, 상태 관리와 위젯 갱신을 처리할 수 있습니다.

또한, SortController 클래스를 통해 목록 정렬을 관리합니다. SortController 클래스를 다음과 같이 정의해주세요.

class SortController extends GetxController {
  RxList<String> sortedItems = <String>[].obs;

  void sortList() {
    sortedItems.sort();
  }
}

SortController 클래스에서는 sortedItems를 관리하며, sortList() 메서드를 통해 목록을 정렬합니다.

3. 터치 이벤트에 따른 목록 정렬하기

작성한 SortedListWidget를 화면에 출력하고, 터치 이벤트에 따라 목록을 정렬해보겠습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GetX Sorted List Example'),
        ),
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Get.find<SortController>().sortList();
              },
              child: const Text('Sort List'),
            ),
            const SizedBox(height: 10),
            Expanded(
              child: SortedListWidget(),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 ElevatedButton을 터치하면 SortController의 sortList() 메서드를 호출하여 목록을 정렬합니다. 그리고 SortedListWidget 위젯을 화면에 출력합니다.

마무리

이번 포스트에서는 getX 패키지를 사용하여 터치 이벤트에 따라 정렬된 목록 위젯을 구현하는 방법에 대해 알아보았습니다. getX 패키지를 활용하면 편리하게 터치 이벤트와 상태 관리를 처리할 수 있으며, 복잡한 애플리케이션의 개발에 유용하게 사용할 수 있습니다.

참고: GetX 패키지 공식 문서