목차
소개
이번 튜토리얼에서는 플러터와 이졀 패키지인 “expandable”을 사용하여 날씨 정보를 제공하는 앱을 개발하는 방법에 대해 알아보겠습니다. 이 앱은 사용자가 도시를 선택하고 해당 도시의 날씨 정보를 확인할 수 있으며, 상세한 날씨 정보를 확장 및 축소할 수 있는 기능을 제공합니다.
프로젝트 설정
먼저, Flutter 프로젝트를 생성하고 필요한 의존성을 추가해야 합니다.
의존성 설정
pubspec.yaml 파일을 열고 다음과 같이 의존성을 추가합니다:
dependencies:
expandable: ^5.0.0
의존성을 추가한 후, 의존성을 업데이트하기 위해 터미널에서 flutter pub get 명령을 실행합니다.
날씨 API 연동
이제 날씨 API와 연동하여 날씨 정보를 가져올 수 있도록 설정해야 합니다. 예를 들어 “OpenWeatherMap” API를 사용한다고 가정하겠습니다. OpenWeatherMap에서 API 키를 발급받고, http 패키지를 사용하여 API 호출을 구현합니다.
import 'package:http/http.dart' as http;
import 'dart:convert';
final apiKey = 'YOUR_API_KEY';
Future<Map<String, dynamic>> getWeather(String city) async {
var apiUrl =
'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey';
var response = await http.get(Uri.parse(apiUrl));
if (response.statusCode == 200) {
var data = jsonDecode(response.body);
return data['weather'][0];
} else {
throw Exception('Failed to fetch weather');
}
}
위의 코드는 OpenWeatherMap API를 호출하여 도시 이름을 기반으로 날씨 정보를 가져오는 함수입니다. 이 함수를 통해 날씨 정보를 가져올 수 있습니다.
UI 디자인
이제 날씨 정보를 보여줄 UI를 디자인합니다. 예를 들어, 선택한 도시의 이름, 현재 온도, 날씨 아이콘 등을 표시할 수 있습니다. UI를 디자인하는 방법은 본인의 취향에 따라 자유롭게 선택하시면 됩니다.
날씨 정보 확장 및 축소 기능 구현
expandable 패키지를 사용하여 날씨 정보를 확장하거나 축소할 수 있는 기능을 구현합니다. 예를 들어, 터치 이벤트를 통해 확장 및 축소를 할 수 있도록 하거나, 버튼을 이용하여 확장 상태를 토글할 수도 있습니다.
import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';
class WeatherDetails extends StatefulWidget {
final String city;
WeatherDetails({this.city});
@override
_WeatherDetailsState createState() => _WeatherDetailsState();
}
class _WeatherDetailsState extends State<WeatherDetails> {
ExpandableController _expandableController;
@override
void initState() {
super.initState();
_expandableController = ExpandableController(initialExpanded: false);
}
@override
Widget build(BuildContext context) {
return ExpandablePanel(
controller: _expandableController,
header: Text(widget.city, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
expanded: FutureBuilder(
future: getWeather(widget.city),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasData) {
var weatherData = snapshot.data;
return Column(
children: [
Text('Temperature: ${weatherData['temperature']}'),
Text('Humidity: ${weatherData['humidity']}'),
Text('Weather Condition: ${weatherData['condition']}'),
],
);
} else if (snapshot.hasError) {
return Text('Failed to fetch weather data.');
} else {
return Text('No data available.');
}
},
),
);
}
}
위의 코드는 expandable 패키지를 사용하여 날씨 정보를 확장 및 축소할 수 있는 위젯을 구현한 것입니다. WeatherDetails 클래스는 선택한 도시의 날씨 정보를 표시하고, 확장 및 축소를 담당합니다.
이제 사용자가 도시를 선택하면 해당 도시의 온도, 습도, 날씨 상태 등을 볼 수 있는 날씨 정보 제공 앱이 완성되었습니다.