다중 선택 버튼 처리하기

플러터에서 화면을 구현하다 보면 아래 이미지 처럼
다중 선택이 가능한 버튼 리스트를 만들어야 할 때가 있습니다.

구현 한 방법이 맞는지 모르지만 동작이 잘 되므로 코드를 공유 해보려고 합니다🤔

1. 변수 선언하기

음식 리스트를 전역변수로 선언해보겠습니다.
DB에서 가져온 값을 List 변수에 초기화해서 사용할 수도 있습니다.

 var food=['계란','우유','땅콩','새우','복숭아']; // 출력할 음식 목록
 List<String> foodList= List<String>(); // 선택한 음식 값을 담을 List변수

2. 버튼 그리기

사용한 위젯 : InkWell, Container, Text

코드를 입력하세요

3. 가로로 슬라이드 되도록 출력하기

2에서 만든 버튼으로 가로 슬라이드가 되는 리스트를 출력합니다.
사용한 위젯 : Container, Wrap, ListView

Container(
    margin: EdgeInsets.symmetric(vertical:10),
    height: 350, // ListView를 쓰려면 높이를 지정해줘야 함
    child:ListView(
      scrollDirection: Axis.horizontal, // 슬라이드 방향을 가로로 설정
      children: [
         Wrap(
            direction: Axis.vertical, // 버튼이 세로로 정렬돼야 가로 슬라이드 화면에 적합
            children: [
               for(var i = 0; i < food.length; i++)
                  Container( child: * 2의 출력될 버튼 위젯 * ),
	    ],
         ),
      ],
   ),
),

4. 선택한 값 List 변수에 add하기

List변수에 선택한 음식 값을 add하고, 중복되는 값이 있을 경우에는 remove하여
선택된 값만 가지고 있도록 합니다.

foodList.contains(food[i]) ? foodList.remove(food[i]) : foodList.add(food[i]);

5. 버튼 색으로 구분하기

foodList(선택한 값들이 저장된 List)에
값이 존재할 경우 green 컬러를, 존재하지 않을 경우 grey 컬러를 출력합니다.

color : foodList.contains(food[i]) ? Colors.green : Colors.grey

6. 전체코드

코드를 입력하세요