[flutter] DropdownButton 위젯과 함께 사용하는 다이얼로그

08 Dec 2023

flutter

Flutter 애플리케이션을 개발하다보면 사용자가 선택할 수 있는 옵션을 제공하는 경우가 많습니다. 이때 DropdownButton 위젯과 함께 사용자에게 선택 사항을 보여주는 다이얼로그를 구현할 수 있습니다. 이 포스트에서는 Flutter에서 DropdownButton을 사용하여 다이얼로그를 구현하는 방법에 대해 알아보겠습니다.

DropdownButton 위젯 소개

DropdownButton은 Flutter에서 사용자가 선택할 수 있는 옵션 목록을 표시하는 위젯입니다. 사용자가 DropdownButton을 탭하면 옵션 목록이 나타나고, 사용자는 목록에서 원하는 항목을 선택할 수 있습니다.

DropdownButton<String>(
  value: _selectedOption,
  items: _options.map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      _selectedOption = newValue;
    });
  },
)

DropdownButton 위젯은 value, items, onChanged 등의 속성을 사용하여 현재 선택된 값, 옵션 목록, 선택 시 동작을 정의할 수 있습니다.

DropdownButton과 다이얼로그 함께 사용하기

DropdownButton를 통해 옵션을 제공하고, 사용자에게 선택 창을 보여주기 위해 showDialog 함수를 사용할 수 있습니다. showDialog 함수는 다이얼로그를 표시하는 데 사용되며, 선택 사항을 보여주고 선택된 항목에 대한 동작을 구현할 수 있습니다.

RaisedButton(
  child: Text('Show Options'),
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Select an Option'),
          content: DropdownButton<String>(
            value: _selectedOption,
            items: _options.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String newValue) {
              setState(() {
                _selectedOption = newValue;
              });
              Navigator.of(context).pop();
            },
          ),
        );
      },
    );
  },
)

위 코드에서는 RaisedButton을 터치하면 showDialog 함수를 사용하여 AlertDialog를 보여주고, AlertDialog의 content로 DropdownButton을 구현하여 사용자에게 선택 창을 제공합니다. 선택한 옵션의 값이 변경되면 다이얼로그가 닫히도록 구현되어 있습니다.

이제 Flutter 앱에서 DropdownButton을 사용하여 다이얼로그를 구현하는 방법을 알게 되었습니다. DropdownButton과 showDialog를 효과적으로 결합하여 사용자에게 편리한 선택 환경을 제공할 수 있습니다.

이상으로 Flutter의 DropdownButton과 함께 사용하는 다이얼로그에 대해 알아본 내용을 마칩니다.

참고 자료

Flutter 공식 문서