[flutter] 플러터 GridView에서 아이템을 다중 선택하는 방법은?

18 Dec 2023

flutter

플러터(Flutter)로 GridView를 사용하고 있을 때, 사용자가 아이템을 다중으로 선택할 수 있도록 구현하고 싶다면, GridView 위젯과 함께 MultiSelect 기능을 구현해야 합니다.

1. MultiSelect 패키지 추가

먼저, multi_select_flutter 패키지를 프로젝트에 추가해야 합니다. 이 패키지는 다중 선택을 구현하는 데 도움이 되는 다양한 기능과 위젯을 제공합니다.

dependencies:
  multi_select_flutter: ^5.0.0

터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. MultiSelectGridView 구현

이제 코드에서 MultiSelectGridView 위젯을 사용하여 다중 선택 기능을 구현할 수 있습니다.

import 'package:multi_select_flutter/multi_select_flutter.dart';

...

List<Item> _items = [
  Item(id: 1, name: 'Item 1'),
  Item(id: 2, name: 'Item 2'),
  Item(id: 3, name: 'Item 3'),
  // Add more items as needed
];

List<Item> _selectedItems = [];

...

MultiSelectChipField(
  items: _items.map((item) => MultiSelectItem<Item>(item, item.name)).toList(),
  initialValue: _selectedItems,
  onSelectionChanged: (selectedItems) {
    // Update selected items
    _selectedItems = selectedItems;
  },
),

위의 예제 코드에서는 _items 리스트에 있는 항목들을 MultiSelectItem으로 변환하여 MultiSelectChipField를 통해 다중 선택 기능을 구현했습니다.

이제 GridView에서 아이템을 다중 선택할 수 있게 되었습니다.

참고 자료

multi_select_flutter 패키지

이제 위의 단계를 따라하여 플러터 GridView에서 아이템을 다중 선택할 수 있게 될 것입니다.