플러터에서는 Drawer 위젯을 사용하여 네비게이션 메뉴를 만들 수 있습니다. 기본적으로 Drawer는 단일 선택 기능만 제공하며, 항목을 선택할 때마다 해당 화면으로 이동합니다. 하지만 때로는 여러 항목을 동시에 선택하고 처리해야 할 때가 있습니다. 이때는 다중 선택 기능을 추가해야 합니다.
다음은 플러터 Drawer에서 다중 선택 기능을 추가하는 방법입니다.
1. Drawer 항목의 다중 선택 가능하게 만들기
다중 선택 기능을 추가하기 위해선 Drawer의 각 항목이 체크박스와 연결되어야 합니다. 이를 위해 ListTile 위젯을 사용하는 것이 좋습니다. ListTile 위젯은 체크박스를 쉽게 추가할 수 있는 기능을 제공합니다.
Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text('항목 1'),
leading: Checkbox(
value: _isSelected[0],
onChanged: (bool newValue) {
setState(() {
_isSelected[0] = newValue;
});
},
),
),
ListTile(
title: Text('항목 2'),
leading: Checkbox(
value: _isSelected[1],
onChanged: (bool newValue) {
setState(() {
_isSelected[1] = newValue;
});
},
),
),
// 추가적인 항목들...
],
),
),
위의 예제에서는 ListTile 위젯을 사용하여 체크박스와 항목 이름이 있는 각각의 항목을 생성합니다. 체크박스의 상태는 _isSelected라는 List
2. 선택된 항목 처리하기
다중 선택 기능을 추가했다면 선택된 항목을 어떻게 처리할지 결정해야 합니다. 여기에서는 단순히 선택된 항목들을 출력하는 예제를 보여드리겠습니다.
FlatButton(
onPressed: () {
List<String> selectedItems = [];
for (int i = 0; i < _isSelected.length; i++) {
if (_isSelected[i]) {
selectedItems.add('항목 ${i+1}');
}
}
print('선택된 항목: $selectedItems');
},
child: Text('선택 확인하기'),
),
위의 예제에서는 FlatButton 위젯을 사용하여 ‘선택 확인하기’ 버튼을 만듭니다. 이 버튼을 누르면 선택된 항목들이 출력됩니다. _isSelected 리스트를 순회하면서 체크된 항목들을 selectedItems 리스트에 추가하고, 이를 출력합니다.
이제 플러터 Drawer에서 다중 선택 기능을 추가하는 방법에 대해 알아보았습니다. 이를 응용하여 선택된 항목에 따라 다른 작업을 수행하도록 코드를 작성할 수 있습니다.