[flutter] Flutter Riverpod에서 일기장 앱 만들기

14 Dec 2023

flutter

Riverpod는 Flutter에서 상태 관리와 의존성 관리를 쉽게 할 수 있게 해주는 패키지 중 하나입니다. 이번 블로그에서는 Riverpod를 사용하여 간단한 일기장 앱을 만드는 방법을 알아보겠습니다.

Riverpod란?

Riverpod는 프로바이더 패턴을 사용하여 상태 관리와 의존성 관리를 위한 응용 프로그램을 간소화하는 데 도움을 주는 Flutter 패키지입니다. 이를 통해 앱 상태를 관리하고, 의존성을 주입하며, 앱 전반적인 아키텍처를 개선할 수 있습니다.

일기장 앱 UI 설계

먼저, Flutter로 간단한 일기장 앱의 UI를 설계합니다. 여기에는 일기를 작성하고 편집할 수 있는 화면이 포함되며, Riverpod를 사용하여 상태 관리 및 의존성 주입을 처리합니다.

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

final diaryProvider = StateProvider<String>((ref) => ''); // 일기 상태 관리

void main() {
  runApp(
    ProviderScope(
      child: MyApp(), // 앱 실행
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('일기장')),
        body: Consumer(builder: (context, watch, child) {
          final diary = watch(diaryProvider).state;
          return ListView(
            children: <Widget>[
              ListTile(
                title: Text(diary),
                onTap: () {
                  // 일기 편집 화면으로 이동
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => EditDiaryScreen()),
                  );
                },
              ),
            ],
          );
        }),
      ),
    );
  }
}

class EditDiaryScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('일기 편집')),
      body: Consumer(builder: (context, watch, child) {
        final diary = watch(diaryProvider);
        final textEditingController = TextEditingController(text: diary.state);
        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextField(
                controller: textEditingController,
                maxLines: 10,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 일기 저장
                  context.read(diaryProvider).state = textEditingController.text;
                  Navigator.pop(context); // 일기 편집 화면 닫기
                },
                child: Text('저장'),
              ),
            ],
          ),
        );
      }),
    );
  }
}

Riverpod를 사용한 상태 관리 및 의존성 주입

위의 예제에서는 Riverpod를 사용하여 diaryProvider를 생성하고, 해당 프로바이더를 통해 일기장 앱의 상태를 관리하고 있습니다. 또한, Consumer 위젯을 사용하여 상태 변경을 감지하고 UI를 업데이트합니다.

결론

Flutter Riverpod를 사용하여 간단한 일기장 앱을 만드는 방법을 살펴보았습니다. Riverpod를 사용하면 Flutter 앱의 상태 관리와 의존성 주입을 쉽게 처리할 수 있으며, 코드를 간결하게 유지할 수 있습니다.

더 많은 Riverpod의 기능과 활용 방법을 알고 싶다면 공식 문서를 참조해보세요.