複数選択ボタンの操作

プロッタでスクリーンを実装すると、次の画像が表示されます.
複数のオプションを含むボタンリストを作成する必要がある場合があります.
実装方法が正しいかどうか分かりませんが、コードを共有したいです.それはよく動作しているからです.🤔

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.選択した値リスト変数に追加

選択した食品値をリスト変数に追加し、重複値がある場合は削除します.
選択した値のみがあることを確認します.

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

5.ボタン色で区切る

foodList(選択した値を格納したList)
値が存在する場合は緑色を出力し、存在しない場合はグレーを出力します.

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

6.完全なコード

코드를 입력하세요