플러터 강좌: 15.9 화면에 날씨 데이터 출력하기

안녕하세요! 이번 강좌에서는 Flutter를 사용하여 화면에 날씨 데이터를 출력하는 방법을 배우겠습니다. 날씨 데이터를 출력하는 예제는 Flutter의 비동기 처리, API 호출 및 UI 구성 능력을 연습하는 데 훌륭한 주제입니다. 이 강좌에서는 공개된 날씨 API를 사용하여 실시간 날씨 정보를 가져오고 이를 화면에 표시하는 방법을 단계별로 설명하겠습니다.

1. 최신 Flutter 환경 설정

우선 Flutter 개발 환경이 준비되어 있는지 확인해야 합니다. Flutter SDK를 설치하고, 기본 Flutter 애플리케이션을 생성하는 방법은 다음과 같습니다.

dart
flutter create weather_app
cd weather_app
flutter run

기본적으로 Flutter 프로젝트의 구조를 이해하고, Android와 iOS에서 애플리케이션이 실행되는 것을 확인하세요.

2. 필요한 패키지 설치하기

날씨 데이터를 가져오기 위해 외부 API를 사용할 것이므로 아래와 같이 http 패키지를 추가해야 합니다. pubspec.yaml 파일을 열어 다음과 같이 추가합니다:

yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.15.0

패키지를 설치한 후 다음 명령어를 통해 패키지를 가져옵니다:

dart
flutter pub get

3. API 선택하기

여기서는 OpenWeatherMap API를 사용할 것입니다. 이 API는 무료 계획을 제공하며, 사용자 등록 후 API 키를 발급받을 수 있습니다. 아래 링크에서 가입하고 API 키를 얻으세요:

• OpenWeatherMap API

API 키를 발급받았다면 나중에 사용할 수 있도록 안전한 곳에 저장해두세요.

4. 비동기 데이터 가져오기

이제 날씨 정보를 가져오는 함수부터 작성해보겠습니다. Flutter에서는 비동기 API 호출을 쉽게 처리할 수 있도록 async와 await 키워드를 사용할 수 있습니다.

dart
import 'dart:convert';
import 'package:http/http.dart' as http;

Future> fetchWeather(String city) async {
  String apiKey = 'YOUR_API_KEY';  // 여기 자신의 API 키로 변경하세요
  String url = 'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric';
  
  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load weather data');
  }
}

위의 코드에서는 제공된 도시 이름에 대해 OpenWeatherMap API를 호출하고, JSON 응답을 파싱하여 맵 형태로 반환합니다.

5. UI 구성하기

이제 정보를 보여줄 UI를 만들어 보겠습니다. Flutter에서는 Stateful Widget을 사용하여 데이터를 동적으로 업데이트할 수 있습니다. 따라서 WeatherScreen이라는 Stateful Widget을 만들겠습니다.

dart
import 'package:flutter/material.dart';

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State {
  String city = 'Seoul';
  Map? weatherData;

  @override
  void initState() {
    super.initState();
    fetchWeatherData();
  }

  Future fetchWeatherData() async {
    weatherData = await fetchWeather(city);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather in $city'),
      ),
      body: weatherData == null
          ? Center(child: CircularProgressIndicator())
          : Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Temperature: ${weatherData!['main']['temp']} °C',
                  style: TextStyle(fontSize: 24),
                ),
                Text(
                  'Description: ${weatherData!['weather'][0]['description']}',
                  style: TextStyle(fontSize: 24),
                ),
              ],
            ),
    );
  }
}

위의 코드에서는 API에서 가져온 날씨 데이터를 사용자의 화면에 표시하고 있습니다. 날씨 데이터를 가져오는데 시간이 걸리므로 로딩 인디케이터도 추가하였습니다.

6. 기본 UI에 대해 설명하기

6.1 앱바

앱바는 Flutter에서 기본적으로 제공되는 위젯으로, 앱의 제목을 표시하는데 사용됩니다. 여기에 현재 도시 이름을 표시하도록 설정하였습니다.

6.2 로딩 인디케이터

날씨 데이터가 로드될 때까지 사용자가 기다리도록 하기 위해 CircularProgressIndicator를 사용하여 비동기 처리를 시각적으로 나타냈습니다.

6.3 날씨 데이터 표시

API에서 받아온 JSON 데이터를 통해 온도와 날씨 설명을 화면에 출력하였습니다. 이를 통해 사용자는 현재의 날씨 정보를 쉽게 확인할 수 있습니다.

7. 날씨 앱 확장하기

기본적인 날씨 앱이 완성되었지만, 추가적인 기능으로 다음과 같은 것들을 고려해볼 수 있습니다:

• 도시 검색 기능: 사용자가 도시를 입력하여 다른 지역의 날씨를 조회할 수 있도록
• 아이콘 표시: 현재 날씨의 상태에 맞는 아이콘을 표시
• 추가 정보: 습도, 바람 속도 등의 추가적인 정보 제공
• 테마 및 디자인 변경

7.1 도시 검색 기능 구현

사용자가 입력한 도시의 날씨를 검색할 수 있도록 TextField와 ElevatedButton을 추가하면 됩니다.

dart
// Search and fetch weather functionality will be added here
@Override
Widget build(BuildContext context) {
  // ...
  return Scaffold(
    // ...
    body: Column(
      children: [
        TextField(
          onSubmitted: (value) {
            setState(() {
              city = value;
              fetchWeatherData();
            });
          },
          decoration: InputDecoration(labelText: 'Enter City'),
        ),
        // Weather data display continues...
      ],
    ),
  );
}

8. 결론

이번 강좌에서는 Flutter를 사용하여 화면에 날씨 데이터를 출력하는 간단한 애플리케이션을 만들어 보았습니다. 이 과정을 통해 Flutter의 기본적인 구조와 비동기 처리를 이해하고, 외부 API와 연동하는 방법을 배웠습니다. 이렇게 만든 앱을 바탕으로 더 많은 기능을 추가하여 더욱 발전된 날씨 앱으로 만들어보는 것도 좋은 연습이 될 것입니다. 다음 강좌에서는 더욱 다양한 API 연동 방법과 UI 구성 기법에 대해 다뤄보도록 하겠습니다. 감사합니다!