[flutter] 플러터를 이용한 날씨 앱 개발
날씨 정보를 표시하는 애플리케이션은 사용자들에게 매우 유용합니다. 이번 가이드에서는 플러터(Flutter)를 사용하여 간단한 날씨 앱을 개발하는 방법을 안내하겠습니다.
준비물
날씨 정보를 가져오기 위해 OpenWeatherMap API를 사용할 것이므로 해당 API의 키가 필요합니다. 또한, 플러터 개발 환경이 설치되어 있어야 합니다.
프로젝트 설정
플러터 프로젝트를 시작하기 전에 새로운 프로젝트를 생성하고, http 패키지를 설치해야 합니다.
dependencies:
http: ^0.13.3
날씨 정보 가져오기
날씨 정보를 가져오기 위해 OpenWeatherMap API를 호출해야 합니다. 다음은 API를 호출하여 날씨 정보를 가져올 수 있는 간단한 예제입니다.
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<WeatherData> fetchWeatherData(String cityName, String apiKey) async {
final response = await http.get(Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=$cityName&appid=$apiKey'));
if (response.statusCode == 200) {
return WeatherData.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load weather data');
}
}
UI 구성
날씨 정보를 표시하기 위한 UI를 만들어야 합니다. 여기에는 현재 날씨, 기온, 습도 등을 표시하는 부분이 포함됩니다.
화면에 날씨 정보 표시
마지막으로, 가져온 날씨 정보를 화면에 표시해야 합니다. 플러터에서는 FutureBuilder를 사용하여 비동기 작업의 결과를 화면에 표시할 수 있습니다.
FutureBuilder<WeatherData>(
future: fetchWeatherData('Seoul', 'YOUR_API_KEY'),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Text('현재 기온: ${snapshot.data.temperature}');
} else if (snapshot.hasError) {
return Text('날씨 정보를 불러오는 중 에러가 발생했습니다');
}
return CircularProgressIndicator();
},
);
이제 당신은 플러터를 사용하여 간단한 날씨 앱을 개발할 수 있습니다. 플러터의 다양한 기능을 활용하여 더 다채로운 애플리케이션을 만들어보세요!