[flutter] 플러터 프로바이더를 사용하여 날씨 정보 앱 만들기

26 Dec 2023

flutter

이 블로그 포스트에서는 플러터(Flutter) 앱에서 프로바이더(Provider) 패턴을 사용하여 날씨 정보를 보여주는 앱을 만드는 방법에 대해 알아보겠습니다.

1. 프로바이더(Provider)란?

플러터(Flutter) 앱에서 상태 관리를 간단하게 해주는 패키지 중 하나인 프로바이더(Provider)는 InheritedWidget을 기반으로 동작하며 상태 변화를 감지하여 위젯 트리를 자동으로 업데이트합니다.

2. 프로바이더를 사용한 상태 관리

프로바이더를 사용하면 컨텍스트(Context)를 통해 상태를 전파하고, 필요한 곳에서 상태를 손쉽게 사용할 수 있습니다. 또한, 디펜던시를 관리하기 때문에 필요할 때만 위젯을 업데이트하므로 성능상 이점도 있습니다.

3. 날씨 정보 앱 구현

프로바이더를 사용하여 날씨 정보를 가져오고, 화면에 보여주는 간단한 플러터(Flutter) 앱을 만들어보겠습니다.

먼저, provider 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2

다음으로, 날씨 API를 사용하여 현재 날씨 정보를 가져오는 서비스 클래스를 만들고, 프로바이더(Provider)를 통해 상태를 관리합니다.

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

class WeatherInfo {
  final String city;
  final String temperature;

  WeatherInfo({required this.city, required this.temperature});
}

class WeatherService with ChangeNotifier {
  WeatherInfo _weatherInfo = WeatherInfo(city: 'Seoul', temperature: '25°C');

  WeatherInfo get weatherInfo => _weatherInfo;

  Future<void> getWeatherInfo() async {
    // API를 이용하여 날씨 정보를 가져옴
    _weatherInfo = WeatherInfo(city: 'Seoul', temperature: '28°C');
    notifyListeners();
  }
}

마지막으로, 화면에 날씨 정보를 보여주는 위젯을 만들고 프로바이더(Provider)로 상태를 관리합니다.

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

class WeatherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final weatherService = Provider.of<WeatherService>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('City: ${weatherService.weatherInfo.city}'),
            Text('Temperature: ${weatherService.weatherInfo.temperature}'),
            ElevatedButton(
              onPressed: () => weatherService.getWeatherInfo(),
              child: Text('Refresh'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 마치며

이렇게 플러터(Flutter) 앱에서 프로바이더(Provider)를 사용하여 날씨 정보를 보여주는 간단한 앱을 만들어보았습니다. 프로바이더(Provider)를 사용하면 복잡한 상태 관리를 직관적으로 관리할 수 있으며, 앱의 성능을 향상시킬 수 있습니다.

위 포스트에서 사용된 전체 소스코드는 여기에서 확인할 수 있습니다.

이상으로 플러터(Flutter) 앱에서 프로바이더(Provider)를 사용하여 날씨 정보를 보여주는 앱 만들기에 대해 알아보았습니다. 감사합니다.

목차

1. 프로바이더(Provider)란?

2. 프로바이더를 사용한 상태 관리

3. 날씨 정보 앱 구현

4. 마치며