[flutter] DropdownButton 위젯을 사용하여 날씨 선택 기능 구현하기

08 Dec 2023

flutter

Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 Google의 프레임워크입니다. DropdownButton 위젯을 사용하여 사용자가 날씨를 선택할 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. DropdownButton 위젯 추가

먼저, DropdownButton을 사용하기 위해 해당 위젯을 화면에 추가해야 합니다. 다음은 DropdownButton을 추가하는 방법입니다.

String selectedWeather;

DropdownButton<String>(
  value: selectedWeather,
  onChanged: (String newValue) {
    setState(() {
      selectedWeather = newValue;
    });
  },
  items: <String>['Sunny', 'Cloudy', 'Rainy', 'Snowy']
    .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    })
    .toList(),
)

위 코드에서는 DropdownButton을 추가하고, 사용자가 선택한 날씨 값을 저장하는 selectedWeather 변수를 정의합니다. 사용자가 날씨를 선택하면 onChanged 콜백이 호출되어 selectedWeather 값을 업데이트합니다.

2. 선택한 날씨 값 활용

사용자가 DropdownButton을 통해 날씨를 선택하면, 이 값을 활용할 수 있어야 합니다. 예를 들어, 선택한 날씨에 따라 해당하는 날씨 이미지를 보여주거나, 관련 정보를 표시할 수 있습니다.

Widget weatherImage() {
  switch (selectedWeather) {
    case 'Sunny':
      return Image.asset('assets/sunny.png');
    case 'Cloudy':
      return Image.asset('assets/cloudy.png');
    case 'Rainy':
      return Image.asset('assets/rainy.png');
    case 'Snowy':
      return Image.asset('assets/snowy.png');
    default:
      return SizedBox.shrink();
  }
}

위 코드는 선택한 날씨 값에 따라 해당하는 이미지를 보여주는 함수입니다. selectedWeather에 따라 다른 이미지가 표시됩니다.

이제, 위의 두 가지 단계를 따라 하면 사용자가 DropdownButton을 통해 원하는 날씨를 선택하고, 선택한 날씨를 활용할 수 있는 기능을 구현할 수 있습니다.

참고 문헌:

Flutter DropdownButton 위젯: https://api.flutter.dev/flutter/material/DropdownButton-class.html