단위 설정 (섭씨/화씨) 변경 기능 구현

기온을 보는 방식은 지역마다 다르다. 한국과 대부분의 국가는 섭씨(°C)를 사용하고, 미국은 화씨(°F)를 사용한다.

이번 글에서는 Flutter 날씨 앱에서 사용자가 섭씨/화씨 단위를 전환할 수 있는 기능을 직접 구현해본다.

---

🌡️ OpenWeather API의 단위 지원

OpenWeather API는 단위를 간단한 파라미터로 조절할 수 있다.

units=metric     // 섭씨
units=imperial  // 화씨

아무 단위도 지정하지 않으면 Kelvin(기본값)으로 반환되니 반드시 설정해줘야 한다.

---

⚙️ 단위 설정 상태 관리

앱 전체에서 사용할 수 있도록 enum과 상태 변수를 관리하자.

enum TempUnit { celsius, fahrenheit }

TempUnit currentUnit = TempUnit.celsius;

String getUnitParam() {
  return currentUnit == TempUnit.celsius ? 'metric' : 'imperial';
}

추후 Provider, Riverpod 등을 활용해 전역 상태로도 관리 가능하다.

---

📲 단위 전환 UI 구성

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("°C"),
    Switch(
      value: currentUnit == TempUnit.fahrenheit,
      onChanged: (val) {
        setState(() {
          currentUnit = val ? TempUnit.fahrenheit : TempUnit.celsius;
          fetchWeather(); // 단위 변경 후 날씨 새로 불러오기
        });
      },
    ),
    Text("°F"),
  ],
)

스위치 또는 ToggleButtons를 활용해 사용자 선택 UI를 제공한다.

---

📡 API 요청 시 단위 적용

final url =
  'https://api.openweathermap.org/data/2.5/weather?q=Seoul&units=${getUnitParam()}&appid=$apiKey';

단위 설정값을 반영하여 API 요청 시에 함께 전달해야 정확한 결과를 받을 수 있다.

---

📖 온도 단위 표시 포맷

String formatTemperature(double temp) {
  return currentUnit == TempUnit.celsius
    ? '${temp.toStringAsFixed(1)}°C'
    : '${temp.toStringAsFixed(1)}°F';
}

UI에서 출력할 때도 단위 표시를 명확히 해야 혼동이 없다.

---

🧘 마무리하며

단위 설정은 단순해 보이지만, 사용자 경험을 글로벌하게 만드는 핵심이다.
Flutter 앱에서도 설정 하나로 섭씨와 화씨를 자유롭게 전환할 수 있는 기능을 더해보자.

디테일한 설정이 완성도 높은 날씨 앱을 만든다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 날씨 앱 만들기 여정입니다.