[flutter] Flutter Riverpod에서 암호화폐 가격 추적 앱 만들기

14 Dec 2023

flutter

개요

이번 프로젝트에서는 Flutter와 Riverpod을 사용하여 암호화폐 가격을 실시간으로 추적하는 앱을 만들어보겠습니다. Riverpod을 사용하여 상태 관리를 하고, 암호화폐 가격은 외부 API를 통해 가져올 것입니다.

Riverpod이란?

Riverpod은 Flutter 앱을 위한 강력한 상태 관리 라이브러리입니다. Riverpod을 사용하면 상태를 손쉽게 관리하고, 앱의 각 부분 간에 데이터를 전달할 수 있습니다.

앱 디자인과 기능

우리의 앱은 다음과 같은 기능을 가지고 있을 것입니다:

암호화폐 목록 표시
각 암호화폐의 현재 가격 표시
암호화폐를 추가하거나 제거할 수 있는 기능
암호화폐를 선택하여 상세 정보를 볼 수 있는 기능

사용할 외부 API

암호화폐의 현재 가격을 가져오기 위해 CoinGecko API를 사용할 것입니다. 이 API는 다양한 암호화폐에 대한 현재 가격과 관련된 정보를 제공합니다.

코드 예시

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

final cryptoPricesProvider = FutureProvider<Map<String, double>>((ref) async {
  // 외부 API를 통해 암호화폐 가격 가져오기
  // ...
  final response = await api.get('/simple/price?ids=bitcoin,ethereum&vs_currencies=usd');
  final data = json.decode(response.body);
  return data;
});

class CryptoPriceWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final cryptoPrices = watch(cryptoPricesProvider);
    return cryptoPrices.when(
      data: (data) => ListView(
        children: data.entries
            .map((entry) => ListTile(
                  title: Text(entry.key),
                  subtitle: Text('\$${entry.value}'),
                ))
            .toList(),
      ),
      loading: () => CircularProgressIndicator(),
      error: (error, stack) => Text('Error: $error'),
    );
  }
}

결론

이번 포스트에서는 Flutter와 Riverpod을 사용하여 암호화폐 가격 추적 앱을 만드는 과정을 살펴보았습니다. Riverpod을 통해 강력한 상태 관리를 할 수 있고, 외부 API를 이용하여 실제 데이터를 가져와 화면에 표시할 수 있습니다. Flutter와 Riverpod을 활용하여 복잡한 앱도 쉽게 구현할 수 있습니다.