플러터는 구글에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 개발할 수 있습니다. 이번 포스트에서는 플러터의 RxDart 패키지를 활용하여 날씨 앱을 개발하는 방법에 대해 알아보겠습니다.
1. RxDart란?
RxDart는 플러터 앱 개발을 위한 라이브러리로, 반응형 프로그래밍을 지원합니다. 이를 통해 비동기적인 데이터 흐름을 관리하고, 데이터 상태 변화에 따른 앱의 업데이트를 쉽게 다룰 수 있습니다.
RxDart를 사용하기 위해 rxdart 패키지를 pubspec.yaml 파일에 추가하고, 의존성을 설치해야 합니다.
dependencies:
rxdart: ^0.27.0
2. API에서 날씨 정보 가져오기
날씨 정보를 얻기 위해 API를 사용합니다. 여기서는 OpenWeatherMap API를 예시로 사용하겠습니다. 먼저 http 패키지를 pubspec.yaml 파일에 추가하고, 의존성을 설치합니다.
dependencies:
http: ^0.13.3
API를 호출하여 현재 날씨 정보를 가져오는 함수를 작성합니다.
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<WeatherData> getWeatherData(String city) async {
final response = await http.get(Uri.parse(
'https://api.openweathermap.org/data/2.5/weather?q=$city&appid={YOUR_API_KEY}'));
if (response.statusCode == 200) {
return WeatherData.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load weather data');
}
}
class WeatherData {
// 날씨 데이터 모델
}
3. RxDart Observables 사용하기
RxDart의 BehaviorSubject는 값의 동적인 변화를 관찰할 수 있는 Observable입니다. 이를 사용하여 날씨 정보를 감시하고, 앱의 UI를 업데이트합니다.
import 'package:rxdart/rxdart.dart';
class WeatherBloc {
final _weatherData = BehaviorSubject<WeatherData>();
Observable<WeatherData> get weatherDataStream => _weatherData.stream;
void fetchWeatherData(String city) {
getWeatherData(city).then((data) => _weatherData.add(data));
}
void dispose() {
_weatherData.close();
}
}
위 코드에서 fetchWeatherData 함수는 입력된 도시의 날씨 정보를 가져와서 _weatherData BehaviorSubject에 추가합니다. 그리고 날씨 정보가 업데이트될 때마다 weatherDataStream을 통해 앱의 UI가 갱신됩니다.
4. 화면에 날씨 정보 표시하기
이제 RxDart Observables를 통해 얻은 날씨 정보를 화면에 표시하는 방법을 살펴보겠습니다. 화면에는 날씨 정보를 표시하는 WeatherDisplay 위젯을 사용합니다.
class WeatherDisplay extends StatelessWidget {
final WeatherBloc _weatherBloc = WeatherBloc();
@override
Widget build(BuildContext context) {
return StreamBuilder<WeatherData>(
stream: _weatherBloc.weatherDataStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
final weatherData = snapshot.data!;
return Column(
children: [
Text('도시 : ${weatherData.city}'),
Text('기온 : ${weatherData.temperature}'),
Text('날씨 상태 : ${weatherData.weatherCondition}'),
],
);
} else if (snapshot.hasError) {
return Text('날씨 정보를 불러올 수 없습니다.');
} else {
return CircularProgressIndicator();
}
},
);
}
@override
void dispose() {
_weatherBloc.dispose();
super.dispose();
}
}
위 코드에서는 StreamBuilder 위젯을 사용하여 weatherDataStream의 데이터를 구독하고, 데이터의 변화에 따라 화면을 업데이트합니다. snapshot 객체를 통해 데이터의 유무 및 에러 여부를 확인하고 이에 맞게 UI를 구성합니다.
5. 앱에 날씨 정보 표시하기
마지막으로, 위에서 작성한 WeatherDisplay 위젯을 앱에 표시합니다. main.dart 파일의 main 함수를 다음과 같이 수정합니다.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '날씨 앱',
home: Scaffold(
appBar: AppBar(
title: Text('날씨 앱'),
),
body: Center(
child: WeatherDisplay(),
),
),
);
}
}
위 코드에서는 WeatherDisplay 위젯을 앱의 중앙에 표시합니다.
마치며
이번 포스트에서는 플러터의 RxDart 패키지를 활용하여 날씨 앱을 개발하는 방법에 대해 살펴보았습니다. RxDart를 사용하면 비동기 데이터 처리가 효율적이고 간편해지며, 앱의 상태 변화를 쉽게 관리할 수 있습니다. 플러터를 이용하여 다양한 앱을 개발할 때 RxDart를 활용해보시기 바랍니다.
참고 자료: