day1 Flutter 실습: 버튼으로 리스트뷰 정렬 및 새로고침 구현하기

✨ Flutter 실습: 버튼으로 리스트뷰 정렬 및 새로고침 구현하기

Flutter에서 리스트뷰에 데이터를 넣고, 버튼을 눌러 최신순 / 오래된 순, 글자 오름차순 / 내림차순으로 정렬해보는 실습입니다. 기본적인 UI 구성부터 데이터 정렬, 페이지 넘기기까지 하나씩 구현해보겠습니다.

---

🎯 학습 목표

1. 리스트 UI 구성
2. 임의 데이터 삽입
3. 다양한 정렬 (날짜 기준 / 글자 기준)
4. 페이지 넘기기 구현

---

1️⃣ 리스트 UI 만들기

ListView.builder를 사용하여 기본적인 리스트 UI를 구성합니다.

class MyListPage extends StatelessWidget {
  final List<String> items = ['Banana', 'Apple', 'Mango', 'Cherry'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('정렬 리스트')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(items[index]));
        },
      ),
    );
  }
}

---

2️⃣ 데이터 넣기 (날짜 포함 예제)

정렬을 위해 날짜 데이터를 함께 갖는 모델을 정의합니다.

class Item {
  final String name;
  final DateTime createdAt;

  Item({required this.name, required this.createdAt});
}

List<Item> items = [
  Item(name: 'Banana', createdAt: DateTime(2024, 5, 3)),
  Item(name: 'Apple', createdAt: DateTime(2024, 5, 1)),
  Item(name: 'Mango', createdAt: DateTime(2024, 5, 5)),
  Item(name: 'Cherry', createdAt: DateTime(2024, 5, 2)),
];

---

3️⃣ 정렬 기능 추가하기

정렬 기준을 선택할 수 있는 버튼을 만들어줍니다.

enum SortType { latest, oldest, nameAsc, nameDesc }

class SortableList extends StatefulWidget {
  @override
  _SortableListState createState() => _SortableListState();
}

class _SortableListState extends State<SortableList> {
  List<Item> sortedItems = [...items];
  SortType currentSort = SortType.latest;

  void sortItems(SortType type) {
    setState(() {
      currentSort = type;
      switch (type) {
        case SortType.latest:
          sortedItems.sort((a, b) => b.createdAt.compareTo(a.createdAt));
          break;
        case SortType.oldest:
          sortedItems.sort((a, b) => a.createdAt.compareTo(b.createdAt));
          break;
        case SortType.nameAsc:
          sortedItems.sort((a, b) => a.name.compareTo(b.name));
          break;
        case SortType.nameDesc:
          sortedItems.sort((a, b) => b.name.compareTo(a.name));
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('정렬 리스트')),
      body: Column(
        children: [
          Wrap(
            spacing: 8.0,
            children: [
              ElevatedButton(onPressed: () => sortItems(SortType.latest), child: Text('최신순')),
              ElevatedButton(onPressed: () => sortItems(SortType.oldest), child: Text('오래된 순')),
              ElevatedButton(onPressed: () => sortItems(SortType.nameAsc), child: Text('가나다순')),
              ElevatedButton(onPressed: () => sortItems(SortType.nameDesc), child: Text('다나가순')),
            ],
          ),
          Expanded(
            child: ListView.builder(
              itemCount: sortedItems.length,
              itemBuilder: (context, index) {
                final item = sortedItems[index];
                return ListTile(
                  title: Text(item.name),
                  subtitle: Text(item.createdAt.toString()),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

---

4️⃣ 페이지 넘기기 구현 (간단 페이징)

리스트를 페이지 단위로 보여주도록 합니다.

int pageSize = 2;
int currentPage = 0;

List<Item> get pagedItems {
  int start = currentPage * pageSize;
  int end = start + pageSize;
  return sortedItems.sublist(start, end > sortedItems.length ? sortedItems.length : end);
}

이제 ListView.builder 대신 pagedItems를 사용해 출력하고, 페이지 넘김 버튼도 추가해보세요.

ElevatedButton(
  onPressed: () {
    setState(() {
      if ((currentPage + 1) * pageSize < sortedItems.length) {
        currentPage++;
      }
    });
  },
  child: Text('다음 페이지'),
),

---