오늘의 강좌에서는 플러터를 사용하여 실시간 날씨 데이터를 가져오는 방법에 대해 다룰 것입니다. 날씨 애플리케이션은 많은 개발자들이 처음으로 만드는 프로젝트 중 하나이며, 이는 날씨 데이터를 API를 통해 손쉽게 가져와 UI에 표시할 수 있는 흥미로운 경험을 제공합니다. 이번 강좌를 따라가면서 API 호출, JSON 데이터 파싱, StatefulWidget의 활용과 같은 여러 가지 주제를 배워보겠습니다.
최소 요구사항
- 플러터 SDK 및 개발 환경이 설치되어 있어야 합니다.
- 기본적인 다트 언어 및 플러터 프레임워크에 대한 이해가 필요합니다.
- 외부 라이브러리를 사용할 수 있도록 Pub.dev을 사용합니다.
1. 프로젝트 설정
새로운 플러터 프로젝트를 생성하려면 다음 명령어를 실행합니다:
flutter create weather_app생성된 프로젝트 폴더로 이동한 후, lib/main.dart 파일을 엽니다.
2. 필요한 패키지 설치하기
날씨 데이터를 가져오기 위해 HTTP 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가하세요:
dependencies:
http: ^0.13.3
변경사항을 저장한 후, 다음 명령어로 패키지를 설치합니다:
flutter pub get3. API 선택 및 키 얻기
이 강좌에서는 OpenWeatherMap API를 사용하여 실시간 날씨 데이터를 가져옵니다. API를 사용하기 위해 다음 단계를 따릅니다.
- OpenWeatherMap 웹사이트에 가서 계정을 생성합니다.
- API 키를 생성하고, 기록해 두세요.
4. 날씨 데이터 모델 만들기
API에서 반환되는 날씨 데이터의 구조를 이해하고, 이를 다트 모델로 변환할 필요가 있습니다. 다음은 날씨 데이터를 표현하기 위한 간단한 모델입니다:
class Weather {
final String description;
final double temperature;
Weather({required this.description, required this.temperature});
factory Weather.fromJson(Map json) {
return Weather(
description: json['weather'][0]['description'],
temperature: json['main']['temp'],
);
}
}
5. 데이터 가져오기: HTTP GET 요청
이제 날씨 데이터를 API에서 가져오기 위해 HTTP GET 요청을 만들어 보겠습니다. 다음 함수를 메인 파일에 추가하세요:
import 'dart:convert';
import 'package:http/http.dart' as http;
Future fetchWeather(String city) async {
final String apiKey = 'YOUR_API_KEY'; // 본인의 API 키로 변경
final response = await http.get(Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric'));
if (response.statusCode == 200) {
return Weather.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load weather data');
}
}
6. UI 구성하기
이제 사용자 인터페이스를 만들어 보겠습니다. 사용자로부터 도시 이름을 입력받고, 날씨 정보를 표시할 수 있는 간단한 UI를 제작해보세요:
import 'package:flutter/material.dart';
void main() {
runApp(WeatherApp());
}
class WeatherApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Weather App',
home: WeatherHomePage(),
);
}
}
class WeatherHomePage extends StatefulWidget {
@override
_WeatherHomePageState createState() => _WeatherHomePageState();
}
class _WeatherHomePageState extends State {
final TextEditingController _controller = TextEditingController();
Weather? _weather;
String? _errorMessage;
void _getWeather() async {
try {
final weather = await fetchWeather(_controller.text);
setState(() {
_weather = weather;
_errorMessage = null;
});
} catch (e) {
setState(() {
_errorMessage = e.toString();
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Weather App'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(labelText: 'Enter city name'),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: _getWeather,
child: Text('Get Weather'),
),
SizedBox(height: 20),
if (_errorMessage != null)
Text(
_errorMessage!,
style: TextStyle(color: Colors.red),
),
if (_weather != null) ...[
Text('Temperature: ${_weather!.temperature}°C'),
Text('Description: ${_weather!.description}'),
],
],
),
),
);
}
}
7. 앱 실행하기
모든 코드가 작성되었으면, 앱을 실행하여 작동하는지 확인해 보세요. 터미널에서 다음 명령어로 앱을 실행할 수 있습니다:
flutter run도시 이름을 입력하고 ‘Get Weather’ 버튼을 클릭하면 해당 도시의 실시간 날씨 정보가 표시됩니다.
8. 향후 개선 사항
이 애플리케이션은 기본적인 날씨 정보만을 제공합니다. 다음과 같은 개선 사항을 고려해 볼 수 있습니다:
- 현재 위치의 날씨를 가져오기 위한 GPS 기능 추가
- 더 많은 날씨 정보(습도, 기압 등) 표시하기
- UI를 개선하여 사용자 경험 향상
- 오프라인 모드 지원
결론
이번 강좌에서는 플러터를 이용해 실시간 날씨 데이터를 가져오는 간단한 애플리케이션을 만들어 보았습니다. 날씨 API를 사용하는 방법과 API에서 데이터를 어떻게 얻어오는지를 배웠습니다. 이를 통해 더 복잡한 애플리케이션으로 나아갈 수 있는 기초를 쌓으시길 바랍니다.
추가 질문이나 의견이 있으시면 댓글로 남겨주세요!