[flutter] BottomSheet에 라디오 박스 추가하는 방법

14 Dec 2023

flutter

Flutter에서 BottomSheet에 라디오 박스를 추가하는 방법에 대해 알아보겠습니다.

1. BottomSheet 위에 라디오 박스 추가하기

BottomSheet 위에 라디오 박스를 추가하는 방법은 다음과 같습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text('Option 1'),
            leading: Radio(
              value: 1,
              groupValue: _selectedValue,
              onChanged: (value) {
                setState(() {
                  _selectedValue = value;
                });
              },
            ),
          ),
          ListTile(
            title: Text('Option 2'),
            leading: Radio(
              value: 2,
              groupValue: _selectedValue,
              onChanged: (value) {
                setState(() {
                  _selectedValue = value;
                });
              },
            ),
          ),
          // Add more radio options as needed
        ],
      ),
    );
  },
);

여기서 _selectedValue는 선택된 라디오 버튼의 값을 저장하기 위한 변수입니다.

이렇게 하면 BottomSheet에 라디오 박스를 추가할 수 있습니다.

2. BottomSheet에서 선택한 값 사용하기

라디오 박스에서 값이 선택되면 해당 값을 사용할 수 있습니다. 예를 들면, 사용자가 라디오 박스에서 선택한 값에 따라 다른 작업을 수행할 수 있습니다.

// 라디오 박스에서 선택한 값에 따라 다른 작업 수행 예시
void _handleRadioValueChange(int value) {
  setState(() {
    _selectedValue = value;
    // 선택된 값에 따라 다른 작업 수행
    switch (_selectedValue) {
      case 1:
        // Option 1에 대한 작업 수행
        break;
      case 2:
        // Option 2에 대한 작업 수행
        break;
      // Add more cases as needed
      default:
    }
  });
}

이렇게 하면 BottomSheet에서 선택한 값에 따라 다른 작업을 수행할 수 있습니다.

위와 같이 Flutter에서 BottomSheet에 라디오 박스를 추가하고 선택한 값을 사용하는 방법에 대해 알아보았습니다.

더 자세한 정보는 Flutter 공식 문서를 참고하시기 바랍니다.

추가 참고자료: Flutter BottomSheet 공식 문서