Radio Button

이원석·2023년 12월 14일
0

Flutter

목록 보기
38/46

Radio Button

Radio Button은 그룹내에서 하나만 선택할 때 사용
그룹이 되는 항목을 열거형으로 정의하고 group Value 프로퍼티에 열거형으로 정의한 변수를 지정, onChaged 이벤트에서 변경된 값을 반영.

ListTitle

라디오 버튼을 터치해야 인식

enum IceBoxCategory { fridge, freezer }

IceBoxCategory storage = IceBoxCategory.fridge;

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Flexible(
                    flex: 1,
                    child: ListTile(
                      title: const Text('냉장'),
                      leading: Radio(
                        value: IceBoxCategory.fridge,
                        groupValue: storage,
                        onChanged: (value) {
                          setState(() {
                            storage = value as IceBoxCategory;
                          });
                        },
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    child: ListTile(
                      title: const Text('냉동'),
                      leading: Radio(
                        value: IceBoxCategory.freezer,
                        groupValue: storage,
                        onChanged: (value) {
                          setState(() {
                            storage = value as IceBoxCategory;
                          });
                        },
                      ),
                    ),
                  )
                ],
              ),

RadioListTitle

가로 전체가 터치영역

enum IceBoxCategory { fridge, freezer }

IceBoxCategory storage = IceBoxCategory.fridge;

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Flexible(
                    flex: 1,
                    child: RadioListTile(
                      title: const Text('냉장'),
                      value: IceBoxCategory.fridge,
                      groupValue: storage,
                      onChanged: (value) {
                        setState(() {
                          storage = value as IceBoxCategory;
                        });
                      },
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    child: RadioListTile(
                      title: const Text('냉동'),
                      value: IceBoxCategory.freezer,
                      groupValue: storage,
                      onChanged: (value) {
                        setState(() {
                          storage = value as IceBoxCategory;
                        });
                      },
                    ),
                  )
                ],
              ),

참조
밥먹고코딩하자

0개의 댓글