[flutter] Flutter Riverpod에서 코인 거래 앱 만들기
이번에는 Flutter와 Riverpod를 사용하여 간단한 코인 거래 앱을 만드는 방법에 대해 알아보겠습니다.
1. Riverpod 소개
Riverpod는 Flutter 개발자들이 의존성 관리를 쉽게 처리할 수 있도록 도와주는 상태 관리 라이브러리입니다. Provider와 비슷하지만, 더 강력하며, 새로운 문법을 제공하여 코드를 더 간결하고 읽기 쉽게 만들어줍니다.
2. 앱 개발 준비
먼저, Flutter 개발 환경을 설정하고 Riverpod 라이브러리를 프로젝트에 추가합니다.
flutter pub add riverpod
3. 코인 데이터 가져오기
코인 데이터를 가져오기 위해서는 HTTP 패키지를 사용하여 API 호출을 해야 합니다.
import 'package:http/http.dart' as http;
final coinDataProvider = FutureProvider<List<Coin>>((ref) async {
final response = await http.get(Uri.parse('https://api.coinmarketcap.com/v1/ticker/'));
if (response.statusCode == 200) {
final List<dynamic> data = json.decode(response.body);
return data.map((e) => Coin.fromJson(e)).toList();
} else {
throw Exception('Failed to load coin data');
}
});
위 코드에서 FutureProvider는 비동기 작업을 처리하고, API 응답 데이터를 Coin 모델로 매핑하여 반환합니다.
4. UI 구성
이제 앱의 UI를 구성해야 합니다. ListView.builder를 사용하여 코인 목록을 표시하고, Riverpod에서 상태를 관리하여 UI를 업데이트합니다.
final coinListProvider = Provider<List<Coin>>((ref) {
final coinData = ref.watch(coinDataProvider);
return coinData.when(
data: (data) => data,
loading: () => [],
error: (error, stack) => throw error,
);
});
class CoinListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
final coinList = context.read(coinListProvider);
return ListView.builder(
itemCount: coinList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(coinList[index].name),
subtitle: Text(coinList[index].price),
);
},
);
}
}
5. 완성
이제 Riverpod를 사용하여 코인 거래 앱을 만들었습니다. 이제 실행하여 실제 동작하는지 확인해보세요.
이렇게 Riverpod를 사용하면, Flutter 앱에서 상태 관리 및 의존성 주입을 쉽게 처리할 수 있습니다. 좀 더 복잡한 앱을 만들 때, Riverpod가 어떤 점에서 강점을 가지는지 자세히 살펴보시길 권합니다.