[flutter] 플러터 Riverpod에서의 데이터 정렬 처리 방법

30 Nov 2023

flutter

플러터에서 데이터를 정렬하는 방법은 다양한 접근 방식이 있지만, 이번에는 Riverpod 상태 관리 패키지를 사용하여 데이터를 정렬하는 방법을 알아보겠습니다. Riverpod는 플러터의 상태 관리를 단순하고 효율적으로 처리할 수 있는 패키지로, Provider 패턴을 기반으로 동작합니다.

1. Riverpod 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

그리고, 패키지를 다운로드 받기 위해 터미널에서 다음 명령어를 입력해주세요.

flutter pub get

2. 데이터 준비

데이터를 정렬하기 위해 먼저 데이터를 준비해야 합니다. 여기서는 List를 사용하여 간단한 문자열 리스트를 정의하겠습니다.

final dataList = ['Apple', 'Banana', 'Cherry', 'Durian'];

3. 상태 관리 정의

Riverpod를 사용하여 데이터를 정렬하기 위해 상태 관리 코드를 작성해야 합니다. riverpod 패키지를 import 한 뒤, 다음과 같이 상태 프로바이더를 정의해주세요.

import 'package:riverpod/riverpod.dart';

final dataListProvider = Provider<List<String>>((ref) {
  return ref.watch(dataListStateProvider).state;
});

final dataListStateProvider = StateProvider<List<String>>((ref) {
  return [];
});

dataListProvider는 데이터 리스트를 제공하는 프로바이더입니다.
dataListStateProvider는 데이터 리스트의 상태를 제공하는 프로바이더입니다. 초기 상태는 빈 리스트로 설정되어 있습니다.

4. 데이터 정렬

이제 데이터 정렬을 처리하는 코드를 작성해보겠습니다. 정렬은 dataListProvider의 데이터를 변경하여 수행할 수 있습니다.

final sortedDataListProvider = Provider<List<String>>((ref) {
  final dataList = ref.watch(dataListProvider);
  return [...dataList]..sort();
});

sortedDataListProvider는 정렬된 데이터 리스트를 제공하는 프로바이더입니다. dataListProvider를 읽어와 복사한 뒤, sort() 메서드를 사용하여 정렬합니다.

5. UI에서 사용

마지막으로, 정렬된 데이터 리스트를 UI에서 사용하는 방법을 알아보겠습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Text('Data Sorting'),
          ),
          body: Consumer(
            builder: (context, watch, _) {
              final sortedDataList = watch(sortedDataListProvider);
              return ListView.builder(
                itemCount: sortedDataList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(sortedDataList[index]),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

Consumer 위젯을 사용하여 sortedDataListProvider를 읽어와 정렬된 데이터 리스트를 사용할 수 있습니다.
ListView.builder를 사용하여 정렬된 데이터 리스트를 아이템으로 표시합니다.

이제 앱을 실행해보면, 데이터가 정렬되어 화면에 표시되는 것을 확인할 수 있습니다.

결론

이제 플러터 Riverpod을 사용하여 데이터를 정렬하는 방법을 알아보았습니다. Riverpod은 효율적인 상태 관리를 위해 강력한 기능을 제공하므로, 데이터를 정렬하는 등의 작업을 더욱 쉽게 처리할 수 있습니다.