[flutter] 플러터 Riverpod에서의 서버 연동 처리 방법

30 Nov 2023

flutter

플러터(Flutter) Riverpod는 상태 관리와 의존성 주입(Dependency Injection)을 간편하게 해주는 라이브러리입니다. 이를 통해 플러터 앱에서 서버와의 연동을 처리할 수 있습니다. 이번 블로그 포스트에서는 플러터 Riverpod를 사용하여 서버와의 연동을 처리하는 방법에 대해 알아보겠습니다.

1. 패키지 설치

먼저, 플러터 프로젝트에 Riverpod를 추가하기 위해 pubspec.yaml 파일에 아래의 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0-dev.1
http: ^0.13.3

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Provider 생성

flutter_riverpod 패키지를 이용하여 서버와의 연동을 위한 Provider를 생성합니다. Provider는 특정 상태나 객체에 대한 의존성을 주입하고 관리하는 데 사용됩니다.

final weatherProvider = Provider<Weather>((ref) {
  // 서버로부터 날씨 정보를 받아오는 로직 작성
  // 예시로는 http 패키지를 이용하여 API 호출을 수행하도록 하겠습니다.
  final response = await http.get(Uri.parse('https://api.weather.com/'));
  final json = convert.jsonDecode(response.body);
  final weatherData = Weather.fromJson(json);
  return weatherData;
});

class Weather {
  final String location;
  final double temperature;

  Weather({required this.location, required this.temperature});

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

위 예시에서는 weatherProvider를 생성하여 서버로부터 날씨 정보를 받아오는 로직을 작성하였습니다. 이 예시에서는 http 패키지를 사용하여 API를 호출하고, 받아온 json 데이터를 Weather 클래스로 변환한 뒤, 해당 객체를 Provider로 제공하도록 하였습니다.

3. Provider 사용

이제 플러터 앱에서 해당 Provider를 사용하여 서버로부터 받아온 날씨 정보를 화면에 표시할 수 있습니다.

class WeatherScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final weather = watch(weatherProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Location: ${weather.location}'),
            Text('Temperature: ${weather.temperature}'),
          ],
        ),
      ),
    );
  }
}

위 예시에서는 ConsumerWidget을 상속받아 build 메서드를 오버라이딩하여 Provider의 데이터를 읽어옵니다. 이 예시에서는 weatherProvider를 사용하여 날씨 정보를 가져와 화면에 표시하고 있습니다.

이제 플러터 앱을 실행하면 서버로부터 가져온 날씨 정보가 화면에 표시됩니다.

결론

이번 포스트에서는 플러터 Riverpod를 사용하여 서버와의 연동을 처리하는 방법에 대해 알아보았습니다. Riverpod를 사용하면 플러터 앱 개발 시 상태 관리와 의존성 주입을 편리하게 처리할 수 있습니다. 서버 연동 로직을 Provider로 구현함으로써 앱의 확장성과 유지보수성을 높일 수 있습니다.

더 자세한 내용은 아래의 참고 자료를 참고하시기 바랍니다.