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

14 Dec 2023

flutter

Riverpod은 Flutter에서 상태 관리를 위한 강력한 도구입니다. 이 블로그 포스트에서는 Riverpod을 사용하여 간단한 계산기 앱을 만드는 방법에 대해 배워보겠습니다.

목표

우리의 목표는 Riverpod을 사용하여 사용자가 두 숫자를 입력하고 덧셈, 뺄셈, 곱셈 또는 나눗셈을 선택하여 결과를 얻을 수 있는 계산기 앱을 만드는 것입니다.

시작하기

먼저, pubspec.yaml 파일에 riverpod 라이브러리를 추가하고 패키지를 가져와야 합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그런 다음, flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

코드 작성

상태 관리를 위한 Provider 생성

계산기 앱의 두 값(숫자 및 연산자)을 저장하기 위해 Riverpod의 Provider를 사용합니다.

final firstNumberProvider = StateProvider<int>((ref) => 0);
final secondNumberProvider = StateProvider<int>((ref) => 0);
final operationProvider = StateProvider<Operation>((ref) => Operation.add);

위젯 작성

이제 사용자 입력을 받으며 결과를 표시하는 위젯을 작성해 보겠습니다.

class CalculatorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Calculator')),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Consumer(builder: (context, watch, child) {
                  final firstNumber = watch(firstNumberProvider).state;
                  final secondNumber = watch(secondNumberProvider).state;
                  final operation = watch(operationProvider).state;
                  return Text('$firstNumber ${operationToString(operation)} $secondNumber');
                }),
                SizedBox(height: 20),
                NumberInputField(provider: firstNumberProvider),
                SizedBox(height: 10),
                NumberInputField(provider: secondNumberProvider),
                SizedBox(height: 10),
                OperationSelector(),
                SizedBox(height: 20),
                ResultButton(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

연산자 선택 위젯 작성

class OperationSelector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, watch, child) {
      final selectedOperation = watch(operationProvider).state;
      return DropdownButton<Operation>(
        value: selectedOperation,
        onChanged: (Operation operation) {
          context.read(operationProvider).state = operation;
        },
        items: Operation.values.map((operation) {
          return DropdownMenuItem<Operation>(
            value: operation,
            child: Text(operationToString(operation)),
          );
        }).toList(),
      );
    });
  }
}

결과 표시 및 계산 위젯 작성

class ResultButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        int result;
        final firstNumber = context.read(firstNumberProvider).state;
        final secondNumber = context.read(secondNumberProvider).state;
        final operation = context.read(operationProvider).state;
        switch (operation) {
          case Operation.add:
            result = firstNumber + secondNumber;
            break;
          case Operation.subtract:
            result = firstNumber - secondNumber;
            break;
          case Operation.multiply:
            result = firstNumber * secondNumber;
            break;
          case Operation.divide:
            result = firstNumber ~/ secondNumber;
            break;
        }
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('The result is $result'),
        ));
      },
      child: Text('Calculate'),
    );
  }
}

마치며

이제 Riverpod을 사용하여 간단한 계산기 앱을 만들었습니다. 이를 통해 Riverpod이 어떻게 상태 관리를 쉽게 할 수 있게 해주는지 알아보았습니다. Flutter에서 Riverpod을 사용하여 더 많은 기능을 활용할 수 있을 것입니다.

참고 자료: Riverpod 공식 문서

이제 이 프로젝트를 시작하고 상태를 관리하는 데 더 나은 방법을 찾을 수 있습니다. Happy coding!