[flutter] Flutter Riverpod에서 월급 계산기 앱 만들기

14 Dec 2023

flutter

소개

이번에는 Flutter의 상태 관리 라이브러리 중 하나인 Riverpod를 사용하여 간단한 월급 계산기 앱을 만들어보겠습니다. Riverpod는 Flutter 앱에서 상태 관리를 효과적으로 할 수 있게 도와주는 라이브러리로써, Provider 패턴과 의존성 주입을 간편하게 처리할 수 있는 장점을 가지고 있습니다.

Riverpod의 기본 개념

Riverpod는 Flutter의 원활한 상태 관리를 위한 Provider 패턴을 기반으로 하고 있습니다. 이를 통해 상태를 관리하고 필요한 곳에서 상태를 제공할 수 있습니다. 또한, Riverpod는 의존성을 주입하기 쉽게 해주고, 상태의 변화를 감지하여 필요한 부분을 업데이트할 수 있도록 도와줍니다.

월급 계산기 앱 만들기

프로젝트 설정

가장 먼저 Flutter 프로젝트를 생성하고, pubspec.yaml 파일에 riverpod 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

Riverpod Provider 생성

월급 계산기 앱에서 월급과 세금을 관리하기 위한 Provider를 생성합니다.

final salaryProvider = StateProvider((ref) => 0.0);
final taxProvider = StateProvider((ref) => 0.0);
final netSalaryProvider = Provider<double>((ref) {
  final salary = ref.watch(salaryProvider).state;
  final tax = ref.watch(taxProvider).state;
  return salary - (salary * tax);
});

UI 작성

사용자 인터페이스를 작성하고 Provider로부터 상태를 사용하여 화면에 출력합니다.

class SalaryCalculatorApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final salary = watch(salaryProvider).state;
    final tax = watch(taxProvider).state;
    final netSalary = watch(netSalaryProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Salary Calculator')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            onChanged: (value) => context.read(salaryProvider).state = double.parse(value),
            decoration: InputDecoration(labelText: 'Monthly Salary'),
          ),
          TextFormField(
            onChanged: (value) => context.read(taxProvider).state = double.parse(value),
            decoration: InputDecoration(labelText: 'Tax Rate'),
          ),
          Text('Net Salary: $netSalary'),
        ],
      ),
    );
  }
}

앱 실행

위와 같이 Riverpod를 사용하여 월급 계산기 앱의 기본 구조를 작성한 뒤, 앱을 실행하여 잘 작동하는지 확인합니다.

결론

Riverpod를 사용하여 Flutter 앱에서 상태를 효과적으로 관리하고, Provider 패턴과 의존성 주입을 간편하게 처리할 수 있는 월급 계산기 앱을 만들어보았습니다. Riverpod를 통해 앱의 상태를 효율적으로 관리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다.

소개