[flutter] Flutter Riverpod에서 화폐 환전 앱 만들기

14 Dec 2023

flutter

개요

이번 글에서는 Flutter 및 Riverpod를 사용하여 화폐 환전 애플리케이션을 만드는 방법에 대해 알아보겠습니다. Riverpod를 이용하면 의존성 관리 및 상태 관리를 효율적으로 할 수 있으며, Flutter를 사용하여 멋진 UI를 구현할 수 있습니다.

프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 Riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

패키지를 설치한 후, 필요한 파일들을 import 합니다.

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

환전 앱 UI 구성

애플리케이션의 화폐 환전 UI를 구성해 봅시다. 환전할 화폐의 종류와 금액을 입력하고, 실시간으로 환전 결과를 확인할 수 있는 UI를 만들어야 합니다.

class ExchangeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('화폐 환전 앱'),
          ),
          body: ExchangeForm(),
        ),
      ),
    );
  }
}

class ExchangeForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: '금액'),
            keyboardType: TextInputType.number,
          ),
          SizedBox(height: 10),
          DropdownButton<String>(
            value: 'USD',
            items: <String>['USD', 'KRW', 'EUR', 'JPY']
                .map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                })
                .toList(),
            onChanged: (String newValue) {
              // 환전할 화폐 선택 시 처리
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // 환전 버튼 클릭 시 처리
            },
            child: Text('환전'),
          ),
          SizedBox(height: 20),
          // 환전 결과 표시할 부분
        ],
      ),
    );
  }
}

상태 및 의존성 관리

이제 Riverpod를 사용하여 환전 앱의 환율 정보 및 환전 결과를 상태로 관리하고, API와의 의존성을 관리해 봅시다.

final exchangeRateProvider = FutureProvider.autoDispose((ref) async {
  // API를 통해 환율 정보 가져오기
});

final exchangeResultProvider = StateProvider((ref) => 0.0);

final exchangeProvider = Provider((ref) {
  // 환전 처리 및 결과 반환
});

환전 앱 완성

마지막으로, UI와 상태 및 의존성을 연결하여 환전 앱을 완성합니다.

class ExchangeForm extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final exchangeRate = watch(exchangeRateProvider);
    final exchangeResult = watch(exchangeResultProvider);
    final exchange = context.read(exchangeProvider);

    return Container(
      // UI 구성
    );
  }
}

위와 같이 Flutter와 Riverpod를 사용하여 화폐 환전 앱을 만들 수 있습니다. Riverpod를 통해 상태 및 의존성을 효율적으로 관리하고, Flutter를 통해 멋진 UI를 구현할 수 있습니다. 이를 기반으로 다양한 기능을 추가하여 완성도 높은 화폐 환전 앱을 만들어보세요.

참고 자료: