[flutter] 플러터(expandable)을 사용하는 날씨 및 자연재해 예보 앱 개발 방법

04 Dec 2023

flutter

플러터는 Google에서 만든 오픈 소스 UI 프레임워크로, 하나의 코드베이스로 안드로이드와 iOS 앱을 개발할 수 있습니다. 이번 블로그 포스트에서는 플러터(expandable)를 사용하여 날씨 및 자연재해 예보 앱을 개발하는 방법에 대해 알아보겠습니다.

프로젝트 설정

먼저 플러터 개발 환경을 설정해야 합니다. Flutter SDK를 다운로드하고 플러터 프로젝트를 생성합니다. 자세한 내용은 Flutter 공식 문서를 참고하세요.

날씨 정보 API 사용

날씨 정보를 받아올 수 있는 무료 API를 사용합니다. 예를 들어 OpenWeatherMap, Weatherbit 등이 있습니다. API에서 제공하는 문서를 참조하여 앱에 필요한 날씨 및 자연재해 예보 데이터를 요청하고 응답을 처리합니다.

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<WeatherData> fetchWeatherData() async {
  final response = await http.get(
    'https://api.example.com/weather',
    headers: {'API-Key': 'YOUR-API-KEY'},
  );
  
  if (response.statusCode == 200) {
    return WeatherData.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load weather data');
  }
}

class WeatherData {
  final String city;
  final double temperature;
  final String description;

  WeatherData({this.city, this.temperature, this.description});

  factory WeatherData.fromJson(Map<String, dynamic> json) {
    return WeatherData(
      city: json['city'],
      temperature: json['temperature'],
      description: json['description'],
    );
  }
}

위의 코드는 API에서 받은 JSON 데이터를 분석하여 WeatherData 객체로 변환하는 함수와 WeatherData 모델 클래스를 보여줍니다.

플러터(expandable) 라이브러리 추가

플러터에서 확장 가능한(expandable) 위젯을 사용하기 위해서는 해당 기능을 제공하는 라이브러리를 추가해야 합니다. 예를 들어 expandable 패키지를 사용하려면 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  expandable: ^4.1.4

그리고 터미널에서 flutter packages get 명령을 실행하여 패키지를 가져옵니다.

UI 디자인

플러터에서 확장 가능한 리스트를 사용하여 날씨 및 자연재해 예보를 표시할 UI를 디자인합니다. 예를 들어 다음과 같이 ExpandablePanel을 사용하여 확장 가능한 리스트를 생성할 수 있습니다.

import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';

class WeatherForecastPage extends StatelessWidget {
  final List<WeatherData> weatherData;

  WeatherForecastPage({this.weatherData});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: weatherData.length,
      itemBuilder: (context, index) {
        return ExpandablePanel(
          header: Text('${weatherData[index].city}'),
          collapsed: Text('${weatherData[index].temperature}°C'),
          expanded: Text('${weatherData[index].description}'),
        );
      },
    );
  }
}

위의 코드는 WeatherData 리스트를 받아와 각 데이터를 텍스트로 표시하는 확장 가능한 리스트를 생성하는 예시입니다.

날씨 및 자연재해 예보 데이터 표시

API에서 받은 날씨 및 자연재해 예보 데이터를 가져와서 UI에 표시합니다. 예를 들어 다음과 같이 fetchWeatherData() 함수를 호출하여 데이터를 가져온 후, WeatherForecastPage 위젯으로 데이터를 전달할 수 있습니다.

class WeatherPage extends StatefulWidget {
  @override
  _WeatherPageState createState() => _WeatherPageState();
}

class _WeatherPageState extends State<WeatherPage> {
  Future<WeatherData> weatherData;

  @override
  void initState() {
    super.initState();
    weatherData = fetchWeatherData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather Forecast'),
      ),
      body: FutureBuilder<WeatherData>(
        future: weatherData,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('Error: ${snapshot.error}'),
            );
          } else {
            return WeatherForecastPage(weatherData: [snapshot.data]);
          }
        },
      ),
    );
  }
}

위의 코드는 날씨 데이터를 비동기로 가져와서 로딩 상태에 따라 다른 UI를 표시하는 예시입니다.

기타 기능 추가

위의 예시에서는 날씨 및 자연재해 예보 데이터를 가져와서 텍스트로 표시하는 기능만을 다루었습니다. 필요에 따라 추가적인 기능을 구현할 수 있습니다. 예를 들어 사용자에게 알림을 보내거나, 사용자 위치를 기반으로 가까운 재해 예보 정보를 제공하는 등의 기능을 추가할 수 있습니다.

위에서 알아본 것처럼, 플러터(expandable)를 사용하여 날씨 및 자연재해 예보 앱을 개발하는 것은 간단하고 효과적입니다. 플러터의 다양한 라이브러리와 기능을 활용하여 앱을 더욱 기능적이고 매력적으로 만들 수 있습니다. 추가적인 기능을 구현하기 위해서는 해당 기능을 제공하는 라이브러리나 API를 찾아서 적용하는 방법을 익히는 것이 중요합니다. 플러터 개발에는 다양한 자료와 문서가 있으니 참고하여 원하는 앱을 만들어보세요!

목차