[flutter] Flutter Riverpod에서 게임 기록 앱 만들기

14 Dec 2023

flutter

이번에는 Flutter와 Riverpod를 사용하여 간단한 게임 기록 앱을 만들어보려 합니다. Riverpod는 Flutter 앱의 상태 관리와 종속성 관리를 위한 강력한 도구로, 코드를 간결하게 유지하고 상태를 효율적으로 관리할 수 있습니다.

Riverpod 라이브러리 추가하기

먼저 pubspec.yaml 파일에 riverpod 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그런 다음 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 가져옵니다.

게임 기록 앱 UI 만들기

다음으로, 게임 기록 앱의 UI를 만들 차례입니다. 여기서는 간단한 형식의 UI로 선수 이름과 게임 스코어를 기록하는 기능을 포함하는 앱을 만들 것입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyGameRecordApp());
}

class MyGameRecordApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameRecordScreen(),
    );
  }
}

class GameRecordScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 게임 기록 화면 UI 구현
  }
}

상태 관리와 데이터 공급자 설정

이제 Riverpod를 사용하여 상태 관리와 데이터 공급자를 설정합니다. 여기서는 게임 기록을 저장하고 관리하기 위해 Riverpod의 StateProvider를 사용합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final gameRecordProvider = StateProvider((ref) => <String, int>{});

위 코드에서는 gameRecordProvider라는 상태 공급자를 생성하며, 게임 기록을 저장하기 위한 Map 형태의 데이터를 포함하고 있습니다.

UI와 데이터 공급자 연결

마지막으로, UI와 데이터 공급자를 연결하여 게임 기록 앱을 완성합니다. 여기서는 Riverpod의 ProviderListener를 사용하여 게임 기록이 추가될 때마다 UI가 업데이트되도록 설정할 수 있습니다.

class GameRecordScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('게임 기록 앱'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '게임 기록 화면',
            ),
            Consumer(builder: (context, watch, child) {
              final gameRecord = watch(gameRecordProvider).state;
              // 게임 기록 데이터 사용하여 UI 업데이트
            }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 게임 기록 추가 기능 구현
        },
        tooltip: '게임 기록 추가',
        child: Icon(Icons.add),
      ),
    );
  }
}

이제 게임 기록 앱이 완성되었습니다. Riverpod를 사용하여 상태 관리와 데이터 공급자를 효율적으로 관리하고, UI와 데이터를 연결하여 완성도 높은 게임 기록 앱을 만들 수 있습니다.

결론

이번 포스트에서는 Flutter와 Riverpod를 사용하여 게임 기록 앱을 만드는 방법을 살펴보았습니다. Riverpod를 활용하면 Flutter 앱의 상태 관리와 데이터 공급자를 보다 효율적으로 관리할 수 있으며, 간단한 UI와 데이터 공급자를 연결하여 완성도 높은 앱을 만들 수 있습니다.

참고: Riverpod 공식 문서