[flutter] Flutter Riverpod에서 영단어 암기 앱 만들기

14 Dec 2023

flutter

이번에는 Flutter 및 Riverpod를 사용하여 간단한 영단어 암기 앱을 만들어 보겠습니다.

1. 시작하기

Riverpod를 사용하려면 먼저 flutter_riverpod 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가합니다:

dependencies:
  flutter_riverpod: ^1.0.3

의존성을 추가했다면, 이제 flutter pub get 명령을 사용하여 패키지를 다운로드합니다.

2. 모델 및 상태 관리

이 예제에서는 단어와 뜻을 갖는 Word 모델과 현재 화면에 표시할 단어를 추적하는 상태를 만들어야 합니다. Riverpod의 StateProvider을 사용하여 단어 상태를 관리합니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';

class Word {
  String word;
  String meaning;
  
  Word({required this.word, required this.meaning});
}

final wordProvider = StateProvider<Word>((ref) {
  return Word(word: 'flutter', meaning: 'to fly unsteadily or hover');
});

3. 사용자 인터페이스

다음은 홈 화면에 단어와 뜻을 표시하는 간단한 UI입니다:

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('영어 단어 암기'),
      ),
      body: Center(
        child: Consumer(
          builder: (context, watch, child) {
            final word = watch(wordProvider).state;
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(word.word, style: TextStyle(fontSize: 24)),
                SizedBox(height: 16),
                Text(word.meaning, style: TextStyle(fontSize: 18)),
              ],
            );
          },
        ),
      ),
    );
  }
}

4. 완료

이제 Riverpod와 Flutter를 사용하여 간단한 영단어 암기 앱을 만들었습니다. 이 예제를 기반으로 사용자의 학습 경험을 향상시키기 위해 다양한 기능을 추가할 수 있습니다. 계속해서 Riverpod를 사용하여 더 많은 기능을 통합해보세요!

1. 시작하기

2. 모델 및 상태 관리

3. 사용자 인터페이스

4. 완료

참고