[flutter] 플러터 프로바이더를 사용하여 지불 앱 만들기

26 Dec 2023

flutter

지불 앱을 만들기 위해 Flutter와 프로바이더를 사용하여 앱의 상태를 관리할 수 있습니다. 이번 블로그에서는 프로바이더를 사용하여 지불 앱을 만드는 방법을 알아보겠습니다.

필수 패키지 설치

우선, 플러터 프로젝트에 다음과 같은 패키지를 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

모델과 프로바이더 만들기

지불 정보를 저장할 모델을 만듭니다.

class Payment {
  final String name;
  final double amount;
  
  Payment(this.name, this.amount);
}

다음으로, 지불 정보를 관리할 프로바이더를 만듭니다.

import 'package:flutter/material.dart';

class PaymentProvider with ChangeNotifier {
  List<Payment> _payments = [];

  List<Payment> get payments => _payments;

  void addPayment(Payment payment) {
    _payments.add(payment);
    notifyListeners();
  }
}

화면 구성

이제 지불 정보를 입력하고, 추가할 수 있는 화면을 만들어봅시다.

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

class PaymentScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지불 앱'),
      ),
      body: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: '이름'),
          ),
          TextField(
            decoration: InputDecoration(labelText: '금액'),
            keyboardType: TextInputType.number,
          ),
          ElevatedButton(
            onPressed: () {
              // Add payment to provider
              var name = // Get name from text field
              var amount = // Get amount from text field
              var paymentProvider = Provider.of<PaymentProvider>(context, listen: false);
              paymentProvider.addPayment(Payment(name, double.parse(amount)));
            },
            child: Text('추가'),
          ),
        ],
      ),
    );
  }
}

지불 정보 표시

마지막으로, 프로바이더에서 받아온 지불 정보를 화면에 표시합니다.

class PaymentList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var paymentProvider = Provider.of<PaymentProvider>(context);
    var payments = paymentProvider.payments;

    return ListView.builder(
      itemCount: payments.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(payments[index].name),
          subtitle: Text('${payments[index].amount}원'),
        );
      },
    );
  }
}

프로바이더를 사용하여 지불 앱을 만드는 방법에 대해 알아보았습니다. 프로바이더를 사용하면 상태 관리를 효율적으로 할 수 있고, 다양한 기능을 수월하게 추가할 수 있습니다.

참고: 플러터 공식 홈페이지 - Provider