[flutter] Flutter Riverpod에서 공부 타이머 앱 만들기

14 Dec 2023

flutter

Flutter는 Google에서 개발한 오픈 소스 모바일 앱 개발 프레임워크로, 빠르고 강력한 앱을 만들 수 있도록 도와줍니다. Riverpod는 Flutter 개발자가 의존성 주입(Dependency Injection)을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이번 블로그에서는 Flutter Riverpod를 사용하여 간단한 타이머 앱을 만드는 방법을 알아보겠습니다.

Prerequisites

Flutter 개발 환경이 설정되어 있어야 합니다. Flutter 설치하기
Visual Studio Code 또는 Android Studio와 같은 편집기가 필요합니다.

프로젝트 생성

먼저 Flutter 프로젝트를 생성합니다.

flutter create riverpod_timer_app

Riverpod 추가

pubspec.yaml 파일에 다음과 같이 riverpod 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0+3

모델 및 로직 구현

다음으로, timer_provider.dart 파일을 생성하고 다음과 같이 코드를 작성합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final timerProvider = StateNotifierProvider<TimerNotifier, Duration>((ref) {
  return TimerNotifier();
});

class TimerNotifier extends StateNotifier<Duration> {
  TimerNotifier() : super(Duration(seconds: 0));

  void startTimer() async {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      state = state + Duration(seconds: 1);
    }
  }

  void resetTimer() {
    state = Duration(seconds: 0);
  }
}

위 코드는 타이머 값을 관리하는 TimerNotifier 클래스와 이를 제공하는 timerProvider를 생성합니다.

UI 구현

이제 main.dart 파일에 UI를 작성해봅시다.

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riverpod 타이머 앱'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Consumer(builder: (context, watch, child) {
                final Duration timer = watch(timerProvider);
                return Text(
                  '${timer.inMinutes.remainder(60).toString().padLeft(2, '0')}:'
                  '${timer.inSeconds.remainder(60).toString().padLeft(2, '0')}',
                  style: TextStyle(fontSize: 80),
                );
              }),
              ElevatedButton(
                onPressed: () {
                  context.read(timerProvider.notifier).startTimer();
                },
                child: Text('Start'),
              ),
              ElevatedButton(
                onPressed: () {
                  context.read(timerProvider.notifier).resetTimer();
                },
                child: Text('Reset'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 timerProvider를 사용하여 타이머 값을 표시하고, 시작 및 재설정 버튼을 구현합니다.

실행

프로젝트 루트 디렉토리에서 다음 명령어를 실행하여 앱을 실행합니다.

flutter run

이제 Riverpod를 사용하여 간단한 타이머 앱을 만들었습니다. Riverpod는 의존성 주입을 관리하는 데 매우 유용하며, 복잡한 앱을 개발할 때 유용하게 활용할 수 있습니다.

더 많은 기능과 자세한 내용은 Riverpod 공식 문서를 참고하세요.

Happy coding!