본 강좌에서는 플러터를 사용하여 날씨 앱을 완성하는 마지막 단계를 진행하겠습니다. 이번 섹션에서는 앱의 사용자 인터페이스(UI) 최적화, 데이터 처리 및 API 연동 등 여러 가지 중요한 요소를 다룰 것입니다. 이 모든 과정은 사용자에게 보다 나은 경험을 제공하기 위한 것입니다.
프로젝트 환경 설정
먼저, 프로젝트가 올바르게 설정되어 있는지 확인합니다. 플러터 SDK와 함께 Android Studio 또는 Visual Studio Code를 설치했는지 확인하세요. 또한, Flutter 환경이 올바르게 구성되어 있는지 확인하려면 터미널에서 다음 명령어를 실행하세요:
flutter doctor이 명령어는 설정된 모든 환경을 검사하고, 필요한 추가 설정이 있는지 알려줍니다.
API 연동하기
날씨 애플리케이션의 핵심은 데이터 소스입니다. OpenWeatherMap API를 사용하여 실시간 날씨 데이터를 가져올 것입니다. API 키를 얻기 위해 OpenWeatherMap 웹사이트에 가입하고, 키를 발급받으세요.
API를 호출하기 위해 http 라이브러리를 사용할 것입니다. 다음 명령어로 http 라이브러리를 추가하세요:
flutter pub add http그 다음, HTTP 요청을 보내는 함수를 구현합니다:
import 'package:http/http.dart' as http;
Future fetchWeatherData(String city) async {
final apiKey = 'YOUR_API_KEY';
final 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) {
// 데이터 처리 로직
} else {
throw Exception('Failed to load weather data');
}
} 데이터 모델링
날씨 데이터를 모델링하기 위해, JSON 데이터를 해당 클래스에 매핑할 수 있도록 모델 클래스를 만들어야 합니다. 예를 들어:
class Weather {
final String cityName;
final double temperature;
final String description;
Weather({required this.cityName, required this.temperature, required this.description});
factory Weather.fromJson(Map json) {
return Weather(
cityName: json['name'],
temperature: json['main']['temp'],
description: json['weather'][0]['description'],
);
}
} 상태 관리
플러터에서는 다양한 상태 관리 방법이 존재합니다. 이 예제에서는 Provider 패턴을 사용할 것입니다. Provider 패키지를 추가하고, WeatherProvider 클래스를 구현하겠습니다:
import 'package:flutter/material.dart';
class WeatherProvider with ChangeNotifier {
Weather? _weather;
Weather? get weather => _weather;
Future getWeather(String city) async {
// API 호출 및 데이터 가져오기
final data = await fetchWeatherData(city);
_weather = Weather.fromJson(data);
notifyListeners();
}
} UI 구축
이제 가장 중요하고도 흥미로운 부분인 UI를 구현하겠습니다. Flutter의 위젯을 사용하여 간단하면서도 직관적인 사용자 인터페이스를 만들어 보겠습니다. 기본 구조는 다음과 같습니다:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('날씨 앱'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('도시명: ${weatherProvider.weather?.cityName}'),
Text('온도: ${weatherProvider.weather?.temperature}°C'),
Text('상태: ${weatherProvider.weather?.description}'),
],
),
),
);
}상태 업데이트
UI는 상태가 변경될 때마다 업데이트 되어야 합니다. 이를 위해 Provider의 Consumer 위젯을 사용하여 상태 변경을 감지하고 UI를 다시 빌드합니다:
Consumer(
builder: (context, weatherProvider, child) {
if (weatherProvider.weather != null) {
return WeatherDisplay(weather: weatherProvider.weather!);
} else {
return CircularProgressIndicator(); // 데이터 로딩 중
}
},
) 마무리 및 빌드
모든 코드가 작성되었다면 이제 앱을 실행하고 결과를 확인할 차례입니다. 터미널에서 다음 명령어를 입력하여 앱을 실행하세요:
flutter run이로써 플러터를 이용한 간단한 날씨 애플리케이션이 완성되었습니다. 추가적으로, 사용자 경험을 개선하기 위해 다양한 기능을 추가할 수 있습니다. 예를 들어, 검색 기능, 위치 기반 서비스 등을 추가하여 사용자가 더 편리하게 날씨 정보를 확인할 수 있도록 할 수 있습니다.
결론
본 강좌를 통해 플러터를 사용하여 날씨 앱을 만드는 기본적인 과정과 사용자 인터페이스, API 사용법, 상태 관리 등을 배울 수 있었습니다. 다양한 기능 추가 및 개선 작업을 통해 지속적으로 발전하는 앱을 만들어보세요. 감사합니다.